PolarisForm
A wrapper component that handles the submission of forms.
Formcomponent examples
Use onSubmit as a callback for when your form is submitted.
import{Form,FormLayout,Checkbox,TextField,Button}from“@shopify /北极星”;import{useState,useCallback}from'react';functionFormOnSubmitExample(){const[newsletter,setNewsletter]=useState(false);const[email,setEmail]=useState('');consthandleSubmit=useCallback(()=>{setEmail('');setNewsletter(false);},[]);consthandleNewsLetterChange=useCallback((value:boolean)=>setNewsletter(value),[],);consthandleEmailChange=useCallback((value:string)=>setEmail(value),[]);return(<FormonSubmit={handleSubmit}><FormLayout><Checkboxlabel="Sign up for the Polaris newsletter"checked={newsletter}onChange={handleNewsLetterChange}/><TextFieldvalue={email}onChange={handleEmailChange}label="Email"type="email"autoComplete="email"helpText={<span>We’llusethisemail address to inform you on future changes toPolaris.</span>}/><Buttonsubmit>Submit</Button></FormLayout></Form>);}Props
Want to help make this feature better? Pleaseshare your feedback.
interface
FormProps
- acceptCharset? string
-
Space separated list of character encodings.
- action? string
-
Where to send form-data on submittal.
- autoComplete? boolean
-
Grants the browser the ability to autocomplete input elements.
- children? React.ReactNode
-
里面的内容显示表单。
- encType? 'application/x-www-form-urlencoded'|'multipart/form-data'|'text/plain'
-
Media type when submitting content to server.
- implicitSubmit? boolean
-
Toggles if form submits on Enter keypress. Defaults to true.
- method? 'post'|'get'|'action'
-
Method used to submit form.
- name? string
-
A unique name for the form.
- 已经? boolean
-
Whether or not form is validated when submitting.
- preventDefault? boolean
-
Blocks the default form action.
- target? string
-
Where to display response after form submittal.
- onSubmit (event:React.FormEvent<HTMLFormElement>) =>unknown
-
Callback when form is submitted.
Best practices
The form component should be used to:
- Wrap around all form input elements
- Emulate the native HTMLformelement behavior with a customonSubmitcallback
Related components
- To arrange fields within a form using standard spacing,use the form layout component
- To see all of the components that make up a form,visit the form sectionof the component library
Accessibility
The form component wraps content in an HTML