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.
- 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 HTMLelement. This helps to support assistive technologies that use different interaction and browse modes.
Forms can have only one submit button and it must be at the end of the form. By default, buttons added to the form are given atypeattribute set tobuttonto avoid conflicts. To make a button the submit button instead (type="submit"), set thesubmitprop on the button.
Keyboard support
By default, theimplicitSubmitprop is set totrue. This allows merchants to submit the form with theenter/returnkey when focus is in any text field inside the form. This provides a shortcut for keyboard users. If this behavior doesn’t fit the form, then set the prop tofalse.