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

<>

  <FormLabel for_id="alone-1">Default horizontal FormLabel:</FormLabel>

  <Checkbox id="alone-1" label="Checkbox" />

</>

Vertical form-label

<>

  <FormLabel for_id="alone-2" label_direction="vertical">

    Vertical FormLabel:

  </FormLabel>

  <Checkbox id="alone-2" label="Checkbox" />

</>

Vertical form-label without a for_id

<>

  <FormLabel vertical={true}>Without for_id (select me):</FormLabel>

  <Checkbox label="Checkbox" />

</>

Linked label (pattern)

<form className="dnb-form">

  <div className="dnb-form__item">

    <div className="dnb-form__cell">

      <FormLabel for_id="switch-1" text="Form Label (click me):" />

    </div>

    <div className="dnb-form__cell">

      <Switch id="switch-1" value="Value of switch" />

    </div>

  </div>

</form>