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>