Docs

Docs

Form Layout

Form Layout allows you to build responsive forms with multiple columns, and to position input labels above or to the side of, the input.
<FormLayout>
  <TextField label='First name'></TextField>
  <TextField label='Last name'></TextField>
  <TextField label='Username' colspan='2'></TextField>
  <PasswordField label='Password'></PasswordField>
  <PasswordField label='Confirm password'></PasswordField>
</FormLayout>

Label position

Input fields' built-in labels are positioned above the input. Form Layout supports side-positioned labels, provided they are wrapped in Form Items and the label position is set to aside.

The only reason for wrapping labels in Form Items is to put the labels to the side of the input.

<FormLayout>
  <FormItem>
    <label slot="label">Revenue</label>
    <TextField>
      <span slot="suffix">EUR</span>
    </TextField>
  </FormItem>
  <FormItem>
    <label slot="label">Expenses</label>
    <TextField>
      <span slot="suffix">EUR</span>
    </TextField>
  </FormItem>
  <FormItem>
    <label slot="label">Invoices</label>
    <TextField>
      <span slot="suffix">EUR</span>
    </TextField>
  </FormItem>
</FormLayout>