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 forId="alone-1">Default horizontal FormLabel</FormLabel>
<Checkbox id="alone-1" label="Checkbox" />

Vertical form-label

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

Vertical form-label without a forId

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

Linked label (pattern)

Code Editor
<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>