Label

The Label component allows users to add an associated text to another form control by using the FormField component.

Import

import { Label } from '@dynatrace/strato-components-preview/forms';

Use cases

Variants

You can use the required prop to mark the label as required. This will then show an asterisk next to it as an indicator to the user that the connected field is required. You can also disable the label using the disabled prop.

CodeSandbox

Complex label

When using a more complex custom label (not string-based), it is necessary to handle the visualization of the required property in the custom label itself. In the basic implementation, it adds an asterisk in the :after of the label.

&:after {
  content: ' *';
}

CodeSandbox

Props

LabelProps

extends, , ,

Name	Type	Default	Description
htmlFor?		-	Defines the id of a labelable form related field.
required?		false	If there is a wrapping form field then this label uses the required value from the form field, otherwise it uses this required value. The label has a visual style to indicate the associated field is a mandatory field.
disabled?		false	If there is a wrapping form field then this label uses the disabled value from the form field, otherwise it uses this disabled value. The label has a visual style to indicate the associated field is disabled.