Skip to content

Field Label

@astryxdesign/core v0.7.1 · FieldLabel

Props ​

PropTypeDefaultDescription
labelstring—Label text. Required.
inputIdstring—id of the control this label belongs to. Becomes the for attribute, and the base for the generated label and description ids. Required.
labelIdstring`${inputId}-label`id put on the label element itself. Point the control's aria-labelledby at it when the label is not a real label.
descriptionstring—Supporting line under the label. Clicking it focuses the control, unless the label is a group label or disabled.
descriptionIdstring`${inputId}-description`id put on the description. Reference it from the control's aria-describedby.
isGroupLabelbooleanfalseRenders the label as a span with no for, for a group of controls instead of a single input.
isLabelHiddenbooleanfalseHides the label visually. It stays in the accessibility tree.
isDisabledbooleanfalseDims the label and stops the description from focusing the control.
isOptionalbooleanfalseShows the optional marker. Wins over isRequired when both are set.
isRequiredbooleanfalseShows the required marker. Inside a FormLayout with defaultOptionality="required" the marker is suppressed, because being required is the default.
labelIconIconName | Component—Icon rendered before the label text, inside a 16px box. The wrapper is aria-hidden, so the icon must not carry meaning on its own.
labelTooltipstring—Tooltip text for the info button at the end of the label row.
optionalLabelstring'Optional'Text of the optional marker. Override it to localize.
requiredLabelstring'Required'Text of the required marker. Override it to localize.

Slots ​

  • labelIcon: icon before the label text. Same place as the labelIcon prop, and the slot wins when both are passed.

Exposed ​

  • element: the rendered label element.