@radix-ui/react-label

What is @radix-ui/react-label?

@radix-ui/react-label is a component library that provides accessible and customizable label components for React applications. It is part of the Radix UI suite, which focuses on building high-quality, accessible UI components.

What are @radix-ui/react-label's main functionalities?

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

Other packages similar to @radix-ui/react-label

react-aria

react-aria provides a set of React hooks for building accessible components. It offers more flexibility and lower-level control compared to @radix-ui/react-label, which provides higher-level, pre-built components.

react-bootstrap

react-bootstrap is a popular UI library that includes form components with built-in labels. It is more comprehensive and includes a wide range of components beyond just labels, whereas @radix-ui/react-label focuses specifically on accessible label components.

formik

formik is a library for building forms in React. It includes label components as part of its form-building toolkit. While formik is more focused on form state management, @radix-ui/react-label specializes in providing accessible and customizable label components.

README

react-label

Installation

$ yarn add @radix-ui/react-label
# or
$ npm install @radix-ui/react-label

Usage

View docs here.