Radix Homepage
Radix Homepage
ThemesThemesPrimitivesPrimitivesIconsIconsColorsColors
DocumentationCase studies
Components

Label

Renders an accessible label associated with controls.

import React from 'react';

import * as Label from '@radix-ui/react-label';

import './styles.css';



const LabelDemo = () => (

  <div
    style={{ display: 'flex', padding: '0 20px', flexWrap: 'wrap', gap: 15, alignItems: 'center' }}
  >

    <Label.Root className="LabelRoot" htmlFor="firstName">

      First name

    </Label.Root>

    <input className="Input" type="text" id="firstName" defaultValue="Pedro Duarte" />

  </div>

);



export default LabelDemo;

Features

    Text selection is prevented when double clicking label.

    Supports nested controls.

Installation

Install the component from your command line.

npm install @radix-ui/react-label

Anatomy

Import the component.

import * as Label from '@radix-ui/react-label';



export default () => <Label.Root />;

API Reference

Root

Contains the content for the label.

PropTypeDefault
asChild
boolean
false
htmlFor
string
No default value

Accessibility

This component is based on the native label element, it will automatically apply the correct labelling when wrapping controls or using the htmlFor attribute. For your own custom controls to work correctly, ensure they use native elements such as button or input as a base.

PreviousHover Card
NextMenubar
Edit this page on GitHub.