Label

Renders an accessible label associated with controls.

Radix UI

Installation

Install the primitive and Copy-Paste the component code in a .tsx file.

npm install @radix-ui/react-label
import * as LabelPrimitive from "@radix-ui/react-label";
import React from "react";
import {
    form,
    type LabelProps,
} from "@tailus/themer"

export interface FormLabelProps extends Omit<LabelProps, "asTextarea" | "floating" | "variant"> {
  className?: string;
}

const Label = React.forwardRef<
  React.ElementRef<typeof LabelPrimitive.Root>,
  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> & FormLabelProps>
  (({ className, size = "md", ...props }, forwardedRef) => {
  
  const { label } = form();
    
  return (
    <LabelPrimitive.Root
      ref={forwardedRef}
      className={label({ size, className })}
      {...props}
    />
    )
});

export default Label;

Usage

Import all the parts and build your Component.

import Label from "@tailus-ui/Label";
import Input from "@tailus-ui/Input";
const MyComponent = () => (
    <div className="space-y-2">
        <Label size="md" htmlFor="name">Full Name</Label>
        <Input id="name"/>
    </div>
)

Reference

Label

The label component

Prop
Type
Default
size
enum
md

Examples

Radio Cards

 
import { Text, Title } from "@tailus-ui/typography";
import Label from "@tailus-ui/Label";
import RadioGroup from "@tailus-ui/RadioGroup";

export const RadioCards = () => (
    <RadioGroup.Root className="space-y-3 [--card-padding:theme(spacing.4)] max-w-md w-full">
        <RadioCard value="personal">
            <div className="flex gap-2 justify-between items-center">
                <Title size="base" className="text-sm" as="div" weight="medium">Personal</Title>
                <Text className="my-0" size="sm">$9.99</Text>
            </div>
            <Text size="sm" className="mb-0 mt-0.5">For personal projects</Text>
        </RadioCard>
        <RadioCard value="startup">
            <div className="flex gap-2 justify-between items-center">
                <Title size="base" className="text-sm" as="div" weight="medium">Business</Title>
                <Text className="my-0" size="sm">$39.99</Text>
            </div>
            <Text className="mb-0 mt-0.5" size="sm">For startups and small businesses</Text>
        </RadioCard>
        <RadioCard value="enterprise">
            <div className="flex gap-2 justify-between items-center">
                <Title size="base" className="text-sm" as="div" weight="medium">Enterprise</Title>
                <Text className="my-0" size="sm">$99.99</Text>
            </div>
            <Text size="sm" className="mb-0 mt-0.5">For large organizations</Text>
        </RadioCard>
    </RadioGroup.Root>
)

const RadioCard = ({value, children}) => (
    <Label htmlFor={value} size="sm" className="block border p-[--card-padding] rounded-[--card-radius] bg-[--ui-bg] card-shadow has-[[data-state='checked']]:ring-2 -ring-offset-px ring-primary-600 dark:has-[[data-state='checked']]:bg-[--ui-soft-bg]">
        {children}
        <RadioGroup.Item value={value} id={value} className="hidden">
            <RadioGroup.Indicator />
        </RadioGroup.Item>
    </Label>
)

Checkbox Cards

 
import { Text, Title } from "@tailus-ui/typography";
import Label from "@tailus-ui/Label";
import Checkbox from "@tailus-ui/checkbox/Checkbox";
import { Check } from "lucide-react";

export const CheckboxCards = () => (
    <div className="grid grid-cols-2 gap-3 [--card-padding:theme(spacing.4)]">
        <CheckGroup value="html">
            <div className="flex gap-2 items-center">
                <HTMLIcon className="size-4"/>
                <Title size="base" as="div" weight="medium">HTML</Title>
                <Text className="my-0" size="sm">$19.99</Text>
            </div>
        </CheckGroup>
        <CheckGroup value="astro">
            <div className="flex gap-2 items-center">
                <AstroIcon className="size-4"/>
                <Title size="base" as="div" weight="medium">Astro</Title>
                <Text className="my-0" size="sm">$29.99</Text>
            </div>
        </CheckGroup>
        <CheckGroup value="next">
            <div className="flex gap-2 items-center">
                <NextIcon className="size-4"/>
                <Title size="base" as="div" weight="medium">Next</Title>
                <Text className="my-0" size="sm">$39.99</Text>
            </div>
        </CheckGroup>
        <CheckGroup value="nuxt">
            <div className="flex gap-2 items-center">
                <NuxtIcon className="size-4"/>
                <Title size="base" as="div" weight="medium">Nuxt</Title>
                <Text className="my-0" size="sm">$39.99</Text>
            </div>
        </CheckGroup>
    </div>
)

const CheckGroup = ({value, children}) => (
    <Label htmlFor={value} size="sm" className="flex items-center gap-12 justify-between border p-[--card-padding] rounded-[--card-radius] bg-[--ui-bg] shadow-sm shadow-gray-950/5 dark:has-[[data-state='checked']]:ring-0 has-[[data-state='checked']]:bg-[--ui-soft-bg]">
        {children}
        <Checkbox.Root value={value} id={value} className="size-4">
            <Checkbox.Indicator>
                <Check className="size-3.5"/>
            </Checkbox.Indicator>
        </Checkbox.Root>
    </Label>
)