Skip to content
Home

FormLabel

Info
Demos
Properties

Import

import { FormLabel } from '@dnb/eufemia'

Description

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

Colon character

DNB UX has chosen to not use colon on the end of form element labels. For consistency throughout our websites, please avoid using them.

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>