Skip to content
Home

FormLabel

Info
Demos
Properties

Description

The FormLabel component represents a caption for all sorts of HTML elements in a user interface.

Demos

Default form-label

Code Editor
<FormLabel for_id="alone-1">Default horizontal FormLabel:</FormLabel>
<Checkbox id="alone-1" label="Checkbox" />

Vertical form-label

Code Editor
<FormLabel for_id="alone-2" label_direction="vertical">
  Vertical FormLabel:
</FormLabel>
<Checkbox id="alone-2" label="Checkbox" />

Vertical form-label without a for_id

Code Editor
<FormLabel vertical={true}>Without for_id (select me):</FormLabel>
<Checkbox label="Checkbox" />

Linked label (pattern)

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