formStyle#

The FormStyle type defines how a form’s content is visually arranged and presented. By choosing a particular style, you can influence the layout of labels, controls, and sections within your form, providing a more organized and intuitive user experience.

Overview#

A Form view can contain various controls (such as text fields, toggles, pickers, etc.) arranged in rows. The FormStyle determines how these rows are displayed—whether labels and values line up in columns or if controls are grouped within visually distinct sections.

Available Styles#

• automatic: Let the system choose the most appropriate style based on context. This is often a good default choice when you don’t have specific layout requirements.

• columns: Displays a non-scrolling form where labels appear in a trailing-aligned column on the left, and their associated values or controls appear in a leading-aligned column on the right. This style is well-suited for forms where alignment and quick scanning of label-value pairs is important.

• grouped: Organizes the form into visually grouped sections. Each row typically has a leading-aligned label and a trailing-aligned control. This style helps segment related input fields into distinct categories, making long or complex forms easier to navigate.

Example Usage#

Columns Style

1<Form formStyle="columns">
2  <TextField
3    title="First Name"
4    value={firstName} 
5    onChanged={setFirstName}
6  />
7  <TextField 
8    title="Last Name" 
9    value={lastName} 
10    onChanged={setLastName} 
11  />
12  <Toggle 
13    title="Subscribe" 
14    value={subscribe} 
15    onChanged={setSubscribe} 
16  />
17</Form>

In this layout, the labels (e.g., “First Name”, “Last Name”, “Subscribe”) appear in a neat column on one side, with their corresponding input fields or toggles aligned next to them.

Grouped Style

1<Form formStyle="grouped">
2  <Section 
3    header={
4      <Text>Personal Information</Text>
5    }>
6    <TextField 
7      title="Email" 
8      value={email} 
9      onChanged={setEmail} 
10    />
11    <TextField 
12      title="Phone" 
13      value={phone} 
14      onChanged={setPhone} 
15    />
16  </Section>
17  <Section 
18    header={
19      <Text>Settings</Text>
20    }>
21    <Toggle 
22      title="Enable Notifications" 
23      value={notificationsEnabled} 
24      onChanged={setNotificationsEnabled} 
25    />
26    <Toggle 
27      title="Auto-Update" 
28      value={autoUpdate} 
29      onChanged={setAutoUpdate} 
30    />
31  </Section>
32</Form>

Here, fields are grouped into sections like “Personal Information” and “Settings.” Each section’s rows present a clear label and control pair, helping users understand the logical grouping of inputs.

Automatic Style

1<Form formStyle="automatic">
2  <TextField 
3    title="Username" 
4    value={username} 
5    onChanged={setUsername} 
6  />
7  <SecureField 
8    title="Password" 
9    value={password} 
10    onChanged={setPassword} 
11  />
12</Form>

With automatic, the system picks a default style. This is a convenient option for simple forms or when you want to allow the system’s default styling to adapt to different contexts or platforms.

Summary#

• Use columns for a structured, two-column layout that makes scanning labels and values straightforward.
• Choose grouped for visually distinct sections that help users navigate more complex forms.
• Select automatic to let the system handle layout decisions, making it ideal for simpler or more adaptable interfaces.

By setting the formStyle on a Form, you can fine-tune the presentation to best suit your form’s complexity and user needs.