Inputs

Label

Renders an accessible label.

Radix DocsAPI ReferenceGitHubStorybook

Installation

  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 Label [v0.0.2]
import React from "react"import * as LabelPrimitives from "@radix-ui/react-label"
import { cx } from "@/lib/utils"
interface LabelProps  extends React.ComponentPropsWithoutRef<typeof LabelPrimitives.Root> {  disabled?: boolean}
const Label = React.forwardRef<  React.ElementRef<typeof LabelPrimitives.Root>,  LabelProps>(({ 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}    tremor-id="tremor-raw"    {...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.

disabled
boolean
Set a disabled look.

Default: false

This component uses the Radix UI API.