#FormLabel

#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} or labelDirection="horizontal" 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

FormLabel is part of the Input category. Other components for similar needs:

• Autocomplete — to help people find and choose from matching suggestions as they type.
• Checkbox — when people can turn one or more options on or off.
• DatePicker — when people need to choose one date or a date range.
• Dropdown — when people need to choose one option from a list.
• Filter — to help people narrow down a list or data set.
• Input — when people need to enter a short line of text.

See all in Input →

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