Skip to content

Demos

Default form-label

<FormLabel forId="alone-1">Default vertical FormLabel</FormLabel>
<Checkbox id="alone-1" label="Checkbox" />

Horizontal form-label

<FormLabel forId="alone-2" vertical={false}>
  Horizontal FormLabel
</FormLabel>
<Checkbox id="alone-2" label="Checkbox" />

Form-label without a forId

Without forId (select me)
<FormLabel element="span">Without forId (select me)</FormLabel>
<Checkbox label="Checkbox" />

Linked label (pattern)

<form>
  <div>
    <div>
      <FormLabel forId="switch-1" text="Form Label (click me):" />
    </div>
    <div>
      <Switch id="switch-1" value="Value of switch" />
    </div>
  </div>
</form>