@radix-ui/react-label

Basic Label

This feature demonstrates how to use the basic Label component to associate a label with an input field using the 'htmlFor' attribute.

import { Label } from '@radix-ui/react-label';

function App() {
  return (
    <div>
      <Label htmlFor="username">Username</Label>
      <input id="username" type="text" />
    </div>
  );
}

Custom Styling

This feature shows how to apply custom styling to the Label component using a CSS class.

import { Label } from '@radix-ui/react-label';
import './App.css';

function App() {
  return (
    <div>
      <Label className="custom-label" htmlFor="email">Email</Label>
      <input id="email" type="email" />
    </div>
  );
}

Label with Description

This feature demonstrates how to include additional descriptive text within the Label component.

import { Label } from '@radix-ui/react-label';

function App() {
  return (
    <div>
      <Label htmlFor="password">
        Password
        <span className="description">(must be at least 8 characters)</span>
      </Label>
      <input id="password" type="password" />
    </div>
  );
}