Label

Installation

Run the following command

npx vibes@latest add label

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: var(--contrast-500);  --label-dark-text: var(--contrast-100);}