Renders an accessible label.


  1. 1

    Install dependencies:

    npm install @radix-ui/react-label
  2. 2

    Add component:

    Copy and paste the code into your project’s component directory. Do not forget to update the import paths.
    // Tremor Raw Label [v0.0.0]
    import React from "react"import * as LabelPrimitives from "@radix-ui/react-label"
    import { cx } from "@/lib/utils"
    interface CheckboxProps  extends React.ComponentPropsWithoutRef<typeof LabelPrimitives.Root> {  disabled?: boolean}
    const Label = React.forwardRef<  React.ElementRef<typeof LabelPrimitives.Root>,  CheckboxProps>(({ className, disabled, ...props }, forwardedRef) => (  <LabelPrimitives.Root    ref={forwardedRef}    className={cx(      // base      "text-sm leading-none",      // text color      "text-gray-900 dark:text-gray-50",      // disabled      {        "text-gray-400 dark:text-gray-600": disabled,      },      className,    )}    aria-disabled={disabled}    {...props}  />))Label.displayName = "Label"
    export { Label };

Example: Label with Checkbox

You can combine the Label with any input element.

Example: Label with disabled state and Checkbox

API Reference: Label

This component is based on the Label component and supports all of its props.

Set a disabled look.

Default: false

This component uses the Radix UI API.