Label

Label

A text descriptor for form elements that improves accessibility and usability.

Storybook

Radix UI Docs

Source

Automatic Installation

This method is still working on progress, please use manual installation for now.

Manual Installation

Install dependencies

npm install radix-ui

Copy the code

components/label/label.tsx

import { Label as LabelPrimitive } from 'radix-ui'
import * as React from 'react'
import { labelStyles } from './label.css'
 
interface LabelProps extends React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> {
  disabled?: boolean
}
 
const Label = React.forwardRef<React.ComponentRef<typeof LabelPrimitive.Root>, LabelProps>(
  ({ className, disabled, ...props }, forwardedRef) => (
    <LabelPrimitive.Root
      ref={forwardedRef}
      className={labelStyles({ disabled, className })}
      aria-disabled={disabled}
      {...props}
    />
  )
)
 
Label.displayName = 'Label'
 
export { Label }

Usage

Imports

import { Label } from '#/components/label'

Example

Browse the Storybook for more examples.

Anatomy

<Label />

Edit on GitHub

Last updated on 3/24/2025

On this page