Label

A form label primitive with required and secondary text markers.

Preview#

Email address

Anatomy#

import { Label, LabelAsterisk } from "raft-ui";

<Label>
  <LabelAsterisk />
</Label>

Usage#

Markers#

Prefer explicit composition over boolean label props. Use LabelAsterisk for required fields, LabelOptional for optional markers, and LabelSub for custom secondary copy.

Email address*Middle name(optional)Project URLpublicProject URL

States#

Disabled label styling is only visual and semantic. Disable the actual form control separately.

Email addressEmail address*

API#WIP

Label#

children

ReactNode

Visible label content. Compose LabelAsterisk, LabelOptional, or LabelSub inside it.

htmlFor

string

Native label association with the matching control id.

sizedefault: "md"

"sm" | "md"

Label text size. Use sm for dense settings rows.

disableddefault: false

boolean

Sets aria-disabled and disabled styling on the label. It does not disable the control.

render

ReactElement | (props, state) => ReactElement

Replace the rendered element when composing into a custom form pattern.

...props

ComponentProps<"label">

Native label attributes.

Prop	Type	Default	Description
`children`	ReactNode	—	Visible label content. Compose LabelAsterisk, LabelOptional, or LabelSub inside it.
`htmlFor`	string	—	Native label association with the matching control id.
`size`	"sm" \| "md"	"md"	Label text size. Use sm for dense settings rows.
`disabled`	boolean	false	Sets aria-disabled and disabled styling on the label. It does not disable the control.
`render`	ReactElement \| (props, state) => ReactElement	—	Replace the rendered element when composing into a custom form pattern.
`...props`	ComponentProps<"label">	—	Native label attributes.

LabelAsterisk#

childrendefault: "*"

ReactNode

Marker content for required fields.

...props

ComponentProps<"span">

Native span attributes for rare custom markers or tests.

Prop	Type	Default	Description
`children`	ReactNode	"*"	Marker content for required fields.
`...props`	ComponentProps<"span">	—	Native span attributes for rare custom markers or tests.

LabelOptional#

childrendefault: "(optional)"

ReactNode

Marker content shown after the label.

...props

ComponentProps<"span">

Native span attributes for rare custom markers or tests.

Prop	Type	Default	Description
`children`	ReactNode	"(optional)"	Marker content shown after the label.
`...props`	ComponentProps<"span">	—	Native span attributes for rare custom markers or tests.

LabelSub#

children

ReactNode

Custom secondary copy shown after the label.

...props

ComponentProps<"span">

Native span attributes for rare custom markers or tests.