Bauhaus Design System

FormLabel ​

Atom

The main label or description text that communicates to 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.

Properties ​

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

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

Playground

Container set to 200px width to demonstrate label truncation.

        
          

            <
            FormLabel

            






            

                label
              
                =
                "Label Text"
              


                labelCategory
              
                =
                "default"
              


                labelPosition
              
                =
                "labelAbove"
              


                clickableLabel
              





  />

Anatomy ​

  1. Container - simply a container.
  2. 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.
  3. 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.
  4. Info Icon - clickable button that triggers a modal providing more information.
States

Default or Locked

Variants
Required

Show or hide asterisk.

Size

Default and Large

Info Icon

Show or hide icon.