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-label

Copy 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

PropTypeDefault
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));}