Inputs
Label
Renders an accessible label.
import { Label } from '@/components/Label';
export const LabelHero = () => ( <div className="flex justify-center"> <Label>Accept terms and conditions</Label> </div>);Installation
- 1
Install dependencies:
npm install @radix-ui/react-label - 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.
import { Checkbox } from "@/components/Checkbox"import { Label } from "@/components/Label"
export const LabelExample = () => ( <div className="flex items-center justify-center gap-2"> <Checkbox id="r1" /> <Label htmlFor="r1">Accept terms and conditions</Label> </div>);Example: Label with disabled state and Checkbox
import { Checkbox } from "@/components/Checkbox"import { Label } from "@/components/Label"
export const LabelDisabledExample = () => ( <div className="flex items-center justify-center gap-2"> <Checkbox disabled id="r2" /> <Label disabled htmlFor="r2"> Accept terms and conditions </Label> </div>);API Reference: Label
This component is based on the Label component and supports all of its props.
- disabled
- Set a disabled look.
boolean
Default: false
This component uses the Radix UI API.