Pallas UI
DocsComponents
Core Concepts
Previews

Label

Renders an accessible label associated with controls.

Installation

Install the following dependencies

npm install @radix-ui/react-label

Copy and paste the following code into your project

import * as LabelPrimitive from '@radix-ui/react-label'
import { styled } from '@styled-system/jsx'
import { type LabelVariant, label } from '@styled-system/recipes'
 
export interface LabelProps extends LabelVariant, LabelPrimitive.LabelProps {}
 
export const Label = styled(LabelPrimitive.Root, label)

Update the import paths to match your project setup

Usage

import { Label } from '@/components/ui/label'
<Label htmlFor="email">Your email address</Label>

Examples

With Input

With Checkbox