Label
Installation
Add the following Soul components
The label component uses the component. Make sure you have added it to your project.
Install the following dependencies
npm install clsx @radix-ui/react-labelCopy and paste the following code into your project
form/label/index.tsx
import * as LabelPrimitive from '@radix-ui/react-label';import { clsx } from 'clsx';import { ComponentPropsWithoutRef } from 'react';/** * This component supports various CSS variables for theming. Here's a comprehensive list, along * with their default values: * * ```css * :root { * --label-light-text: hsl(var(--contrast-500)); * --label-dark-text: hsl(var(--contrast-100)); * } * ``` */export function Label({ className, colorScheme = 'light', ...rest}: ComponentPropsWithoutRef<typeof LabelPrimitive.Root> & { colorScheme?: 'light' | 'dark' }) { return ( <LabelPrimitive.Root {...rest} className={clsx( 'block font-mono text-xs uppercase', { light: 'text-[var(--label-light-text,hsl(var(--contrast-500)))]', dark: 'text-[var(--label-dark-text,hsl(var(--contrast-100)))]', }[colorScheme], className, )} /> );}Usage
'use client';import * as React from 'react';import { Label } from '@/vibes/soul/form/label';function Usage() { const id = React.useId(); return ( <fieldset> <Label htmlFor={id}>First name</Label> <input id={id} /> </fieldset> );}API Reference
This component uses the Label component from Radix UI. Refer to the Label documentation for more information.
Additional Props
| Prop | Type | Default |
|---|---|---|
colorScheme | 'light' | 'dark' | 'light' |
CSS Variables
This component supports various CSS variables for theming. Here's a comprehensive list.
:root { --label-light-text: hsl(var(--contrast-500)); --label-dark-text: hsl(var(--contrast-100));}