Components > Label

Label

Often associated with a form control and used to identify a form element or to display text that describes a form element.

MDN button, Radix UI Label

text-secondary-800 dark:text-secondary-400 text-sm

htmlFor

kind

size

disabled

children

import React from 'react'
import { Input } from '@components/ui/Input';
import { Label } from '@components/ui/Label';

() => {
  return (
    <div className="flex items-center gap-4">
		  <Label 
        htmlFor="name"
        size="sm"
      >
        Name:
      </Label>
			<Input id="name" size="sm" />
		</div>
  );
};

This UI component uses the Text styles under the hood but uses HTML's label element.

Installation

Install Radix UI's Label:

yarn add @radix-ui/react-label

# or
npm install @radix-ui/react-label

Copy and paste this Text primitive at components/ui/Text.tsx.

Copy and paste this Label primitive at components/ui/Label.tsx.

Usage

import { Checkbox } from '@components/ui/Checkbox';
import { Label } from '@components/ui/Label';

const [checked, setChecked] = React.useState(false);

...

<Checkbox
  id="terms"
  checked={checked} 
  onCheckedChange={(value) => setChecked(value)}
/>
<Label htmlFor="terms">
  Accept terms and conditions
</Label>

Examples

Kinds

Name:

Sizes

9xl: First... 8xl: First Name 7xl: First Name 6xl: First Name 5xl: First Name 4xl: First Name 3xl: First Name lead: First Name 2xl: First Name xl: First Name lg: First Name base: First Name sm: First Name xs: First Name

Disabled State

If used in conjunction with an input, you may toggle the disabled prop to true to signify disabled text.

Password: