Label

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

OverviewProperties

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