Raft 设计系统
English

组件 · 输入

Label

A standalone form label in the field-label style, with optional markers for a required or optional value and a line of secondary text.

稳定也叫 LabelAsterisk, LabelOptional, LabelSub
import { Label } from "@botiverse/raft-ui";
本页尚未翻译
译文完成之前，这里显示英文原文。 阅读英文版

Label is a label element in the style of a field label: text-footnote, semibold, in foreground-muted. Use it where a control needs a label but isn't in a Field; inside a field, FieldLabel is the label and wires itself to the control.

When to use

SituationUse
A control in a form: an input, a textarea, a selectFieldLabel in a Field
A checkbox, radio or switch with its label beside it, in a formFieldItem in a Field
A label for a control outside a field, such as a checkbox in a listLabel
The title of a selectable option cardCardTitle in a Card with variant="option"

Anatomy

  • Label: the label. Its text says what the control holds. Required.
  • LabelOptional: the optional marker after the text, "(optional)", in foreground-hint.
  • LabelAsterisk: a required marker, an asterisk in foreground-hint.
  • LabelSub: any other secondary text after the label, in foreground-hint at regular weight.

The markers are also Label.Optional, Label.Asterisk and Label.Sub. FieldLabel draws the same two markers through its optional and required props.

Variants

VariantUse for
size="md" (default)Labels in forms and settings
size="sm"Dense layouts where the default is too large for the space

States

  • Disabled: disabled turns the label and its markers foreground-disabled and sets aria-disabled. It doesn't disable the control: disable that too.

Content

  • Write the label as a noun for what the control holds, in sentence case: Email address (Writing).
  • Mark optional fields with LabelOptional (Forms).

Accessibility

  • Label renders a native label. Connect it to its control with htmlFor and the control's id, or wrap the control in it.
  • The markers are read as part of the label: "Middle name (optional)".

API

Label

Prop类型默认值
disabledboolean
size"sm" | "md""md"
renderAllows you to replace the component's HTML element with a different tag, or compose it with another component.ReactElement | ((props, state) => ReactElement)

Also takes the attributes of its element.

LabelAsterisk, LabelOptional, LabelSub

接受其元素的全部属性。

相关组件