Label

Renders an accessible label associated with controls.

Preview

Accept terms and conditions

Code

import Checkbox from '@dinui/react/checkbox'
import Label from '@dinui/react/label'

export default function LabelDemo() {
  return (
    <div>
      <div className="flex items-center space-x-2">
        <Checkbox id="terms" />
        <Label htmlFor="terms">Accept terms and conditions</Label>
      </div>
    </div>
  )
}

Disabled

Preview

Accept terms and conditions

Code

import Checkbox from '@dinui/react/checkbox'
import Label from '@dinui/react/label'

export default function LabelDisabledDemo() {
  return (
    <div>
      <div className="flex items-center space-x-2">
        <Checkbox id="terms-disabled" disabled className="peer" />
        <Label htmlFor="terms-disabled">Accept terms and conditions</Label>
      </div>
    </div>
  )
}

Installation

Default

1. Follow Installation Guide

   To enable DinUI functionality in your project, you will need to properly set up Tailwind and install the necessary dependencies.

2. All done

   You now can start using this component in your project.

CLI

1. Follow Installation Guide

   To enable DinUI functionality in your project, you will need to properly set up Tailwind and install the necessary dependencies.

2. Run the following command in your project

   npm

   npx @dinui/cli@latest add label

   yarn

   yarn dlx @dinui/cli@latest add label

   pnpm

   pnpm dlx @dinui/cli@latest add label

   bun

   bunx @dinui/cli@latest add label

3. Update the import paths to match your project setup

4. All done

   You now can start using this component in your project.

Manual

1. Follow Installation Guide

   To enable DinUI functionality in your project, you will need to properly set up Tailwind and install the necessary dependencies.

2. Install dependencies

   npm

   npm install @radix-ui/react-label tailwind-variants

   yarn

   yarn add @radix-ui/react-label tailwind-variants

   pnpm

   pnpm add @radix-ui/react-label tailwind-variants

   bun

   bun add @radix-ui/react-label tailwind-variants

3. Copy and paste the following code into your project

   'use client'
   
   import * as LabelPrimitive from '@radix-ui/react-label'
   import { forwardRef } from 'react'
   import { tv, type VariantProps } from 'tailwind-variants'
   
   const label = tv({
     slots: {
       root: 'text-sm font-medium leading-none cursor-pointer peer-disabled:cursor-not-allowed peer-disabled:opacity-70',
     },
     variants: {
       variant: {
         default: null,
         danger: {
           root: 'text-fg-danger',
         },
       },
     },
     defaultVariants: {
       variant: 'default',
     },
   })
   
   const Label = forwardRef<
     React.ElementRef<typeof LabelPrimitive.Root>,
     React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> & VariantProps<typeof label>
   >(({ variant, ...props }, ref) => {
     const { root } = label({ variant })
   
     return (
       <LabelPrimitive.Root {...props} ref={ref} className={root({ className: props.className })} />
     )
   })
   Label.displayName = LabelPrimitive.Root.displayName
   
   export default Label
   export { label, LabelPrimitive }

4. Update the import paths to match your project setup

5. All done

   You now can start using this component in your project.