Creating forms can be done using the Form, FormSection and FormRow components.
Form is a top-level container which renders a native <form> element and provides utilities for
displaying a title and description, as well as managing the space between FormSection.
FormSection helps in rendering sections of a form, which group together multiple form fields. It
can optionally render a title and description.
FormRow manages the horizontal layout of individual fields.
All these components are implemented in terms of the lower level layout components (namely Stack
and Columns) and can be freely mixed and matched to create complex layout as needed.
It's good practice use FormSection to group fields together - even in case of a single
section - in order to achieve consistent layouts.
Let's add a title and description to the form:
<Form title="Sign-up" description="We will ask you some data in order to sign you up" > <FormSection> <FormRow> <ExampleTextFieldlabel="First name"/> <ExampleTextFieldlabel="Last name"/> </FormRow> </FormSection> </Form>
Forms are generally quite useless without a way of submitting them. The Form component provides a
way of rendering a standard submit button:
<Form title="Sign-up" description="We will ask you some data in order to sign you up" submitButton={{ onPress:()=>window.alert("Submitted!"), label:"Sign up", }} > <FormSection> <FormRow> <ExampleTextFieldlabel="First name"/> <ExampleTextFieldlabel="Last name"/> </FormRow> </FormSection> </Form>
In case we need to, we can also add a secondary button next to the submit button:
<Form title="Sign-up" description="We will ask you some data in order to sign you up" submitButton={{ onPress:()=>window.alert("Submitted!"), label:"Sign up", }} secondaryButton={{ onPress:()=>window.alert("Canceled!"), label:"Never mind", }} > <FormSection> <FormRow> <ExampleTextFieldlabel="First name"/> <ExampleTextFieldlabel="Last name"/> </FormRow> </FormSection> </Form>
Let's add a few more sections to the form, this time adding some titles and descriptions:
<Form title="Sign-up" description="We will ask you some data in order to sign you up" > <FormSectiontitle="Personal information"> <FormRow> <ExampleTextFieldlabel="First name"/> <ExampleTextFieldlabel="Last name"/> </FormRow> </FormSection> <FormSection title="Address" description="We need this data for invoicing purposes" > <FormRow> <ExampleTextFieldlabel="Street"/> <ExampleTextFieldlabel="Number"/> </FormRow> <FormRow> <ExampleTextFieldlabel="City"/> </FormRow> <FormRow> <ExampleTextFieldlabel="Country"/> </FormRow> </FormSection> <FormSectiontitle="Tell us more about you"> <FormRow> <ExampleNumberField label="Average income" kind="currency" currency="EUR" /> <ExampleNumberField label="% of income spent on candies" kind="percentage" /> </FormRow> <FormRow> <ExampleSelectField label="Select your gender" options={[ { label:"Male", value:"M", }, { label:"Female", value:"F", }, { label:"Other", value:"O", }, ]} /> </FormRow> <FormRow> <ExampleSliderField initialValue={4} label="How would you rate yourself from 1 to 10?" minValue={1} maxValue={10} /> </FormRow> <FormRow> <ExampleRadioGroupField label={"What's your main income source?"} options={[ { label:"Working", value:"W", }, { label:"Inheritance", value:"I", }, { label:"Other", value:"O", }, ]} /> </FormRow> </FormSection> </Form>
The form looks good, but in some cases we may want to customize the width of single fields. By
default, FormRow makes all fields in a row of the same width, filling the available space.
This can be customized by wrapping a field in a Column component. For example, let's make the
number take only 1/5 of the space, so that the street name has more room. Similarly, let's also make
the city and the country narrower, to better convey the expected length of such fields:
<Form title="Sign-up" description="We will ask you some data in order to sign you up" > <FormSectiontitle="Personal information"> <FormRow> <ExampleTextFieldlabel="First name"/> <ExampleTextFieldlabel="Last name"/> </FormRow> </FormSection> , <FormSection title="Address" description="We need this data for invoicing purposes" > <FormRow> <ExampleTextFieldlabel="Street"/> <Columnwidth="1/5"> <ExampleTextFieldlabel="Number"/> </Column> </FormRow> <FormRow> <Columnwidth="1/2"> <ExampleTextFieldlabel="City"/> </Column> </FormRow> <FormRow> <Columnwidth="1/2"> <ExampleTextFieldlabel="Country"/> </Column> </FormRow> </FormSection> <FormSectiontitle="Tell us more about you"> <FormRow> <ExampleNumberField label="Average income" kind="currency" currency="EUR" /> <ExampleNumberField label="% of income spent on candies" kind="percentage" /> </FormRow> <FormRow> <Columnwidth="1/2"> <ExampleSelectField label="Select your gender" options={[ { label:"Male", value:"M", }, { label:"Female", value:"F", }, { label:"Other", value:"O", }, ]} /> </Column> </FormRow> <FormRow> <ExampleSliderField initialValue={4} label="How would you rate yourself from 1 to 10?" minValue={1} maxValue={10} /> </FormRow> <FormRow> <ExampleRadioGroupField label={"What's your main income source?"} options={[ { label:"Working", value:"W", }, { label:"Inheritance", value:"I", }, { label:"Other", value:"O", }, ]} /> </FormRow> </FormSection> </Form>
This API may look familiar and it's not by coincidence. The FormRow component is a thin wrapper
around the Columns layout component, which sets the default spacing between fields and the
collapse behavior (try resizing the window and you'll see form rows automatically collapse on small
screens).