FormLabel

Usage

Form Label is the main label or description text that communicates the user what input is being requested in the input element it corresponds to. It is an essential part of any input element in Bauhaus Design System, and sometimes it is also used for naming/grouping other UI elements. It must be concise and convey in the most explicit way the purpose of the input element.

Form Label can also be used in Form Groups as a high level label or as a unifying label for any set of UI elements.

Types

Currently there are 2 different types of Form Label components:

Form Label (compact)
Form Label

The difference among them is size and hierarchy. One for individual input elements and one for Form Groups, or any set of UI elements for a higher level grouping. Form Label (compact) and Form Label can both be used in input components, such as Text Input, Select, Number Input, Checkbox, Radio Select, Switch, etc., interchangeably depending on the size desired, however one decided the usage should be consistent across the given application.

Anatomy and Behavior

Container - Form Label component has different anatomies in Figma and in Vue (in code). In Figma, any input element with a label (e.g. Switch, Checkbox, Select, etc.) contains Form Label component and treats input element and Form Label as siblings. In Vue, however, the Form Label component wraps (contains) the input element and label text in a container that defines the position of label text like Above, Right, Left relative to the input element and also controls formatting like margins and gaps between Form Label and input element.
Label text - describes input that is being requested by user for the corresponding input element. It should be a noun or a phrase and should not take more than 1 line. Label text should be written in sentence-case by default, but this guideline is only for designers to follow when designing interfaces. Typically the Label should fit in the available space however in cases it runs out of space, the text may go into multiple lines.
Asterisk - is a required field indicator for Form Label component. It is a property that can be optionally enabled or disabled. It is used when the input field that Form Label corresponds to, is trivial to the completion of task/submitting a form and therefore can not be left empty by user. It is usually tied to the validation property of the input field and the input field will present error if input is not fulfilled. In case of multiple lines, the Asterisk should be visible as shown in the example.
Input component - (any) Form Label structure in our codebase has a slot for an input element. Developers can use one Form Label and call various input elements to make them “with label” and define the position of the label relative to input component.

States

Form Label is a read-only component (not clickable), and therefore does not have any states, except for Disabled state that is dependent on the input element it relates to. Form Label will display Disabled state if the input element it corresponds to is disabled.

Gaps and Sizes

Gap between Label and Asterisk: Unit (1px for all size wrappers) Gap between Label and Input component:

When Above: 2XS
When Label is Leading: M
When Label is Trailing: S

Width of Label:

For Label Above: Fill parent container's width (as long as the container of the input element can go)
For Label Leading: Fill parent container's width (usually defined in the app context)
For Label Trailing: Fill parent container's width (usually defined in the app context)

If the label text does not fit in the available width, it can go into multiple lines. Height: Hug contents (element adapts to the contents’ height). For constraints and alignments check Inspect tool in Figma, in the right-hand panel.

Tokens

SCSS Variable

Value

$label-notRequired-color

--color-grey-40

$label-notRequired-color--locked

--color-grey-70

$label-required-asterisk-color

--color-red-50

$label-required-color--locked

--color-grey-70

$formLabel-compact-text: %form-label1

$formLabel-text: %form-label2

Properties

export type FormLabelCategory = "compact" | "default";
export type FormLabelPosition = "labelLeading" | "labelTrailing" | "labelAbove";

export interface FormLabelProps extends TooltipProps {
  label?: string;
  tooltip?: string;
  labelCategory: FormLabelCategory;
  labelPosition: FormLabelPosition,
  disabled?: boolean;
  required?: boolean;
  clickableLabel?: boolean;
}

INFO

Other components are being displayed to show how label works.

Configurations

Switch component is being displayed to show how label works.

Form Label
Category	Size	Normal	Required	Disabled	Disabled-Required
Compact
	`small`	Label	Label*	Label	Label*
	`medium`	Label	Label*	Label	Label*
	`big`	Label	Label*	Label	Label*
Default
	`small`	Label	Label*	Label	Label*
	`medium`	Label	Label*	Label	Label*
	`big`	Label	Label*	Label	Label*

INFO

Position of the Form Label works different for small or big input components as shown below

Form Label Positions
Component Size	Label Leading	Label Trailing	Label Above
Small
Small	Label	Label	-
Big
Big	Label	-	Label

FormLabel ​

Usage ​

Types ​

Anatomy and Behavior ​

States ​

Gaps and Sizes ​

Tokens ​

Properties ​

Configurations ​