Label

A label component for form fields with proper accessibility and association with inputs

Installation

Terminal
pnpm add @choice-ui/label

Import

Component.tsx
import { Label, type LabelProps } from "@choice-ui/label"

Basic

Basic label usage.
Use the `Label` component to annotate form fields.

With Description

Label with description.
Use the `description` prop to provide additional context.

Disabled

Disabled label.
Use the `disabled` prop to indicate the field is not editable.

Required

Required label.
Use the `required` prop to show a required indicator.

With Action

Label with action.
Use the `action` prop to add an action to the label.

API reference

LabelPropsTypeDefault
action
ReactNode -
as
undefined
|
"label"
|
"legend"
-
description
string
|
undefined
-
disabled
boolean
|
undefined
-
required
boolean
|
undefined
-
variant
undefined
|
"default"
|
"light"
|
"dark"
|
"reset"
-