Form label#

Import#

import { FormLabel } from '@dnb/eufemia'

Description#

The FormLabel component represents a caption for all sorts of HTML elements in a user interface. By default, the label is displayed vertically (above the element). Use vertical={false} for inline labels.

Relevant links#

• Figma
• Source code
• Docs code

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.

Related components#

Form label is part of the Formatting and typography category. More components in this category:

• Date format — to show dates in the correct DNB format.
• Heading — to create accessible page headings with the correct level.
• List format — to show lists of values in the correct DNB format.
• Number format — to show numbers in the correct DNB format.

Demos#

Default form-label#

<FormLabel forId="alone-1">Default vertical FormLabel</FormLabel>
<Checkbox id="alone-1" label="Checkbox" />

Horizontal form-label#

<FormLabel forId="alone-2" vertical={false}>
  Horizontal FormLabel
</FormLabel>
<Checkbox id="alone-2" label="Checkbox" />

Form-label without a forId#

<FormLabel element="span">Without forId (select me)</FormLabel>
<Checkbox label="Checkbox" />

Linked label (pattern)#

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