Label

Import

import { Label } from 'tuimorphic';

Usage

The Label component provides form field labels with terminal aesthetics and support for required/optional indicators.

Username

<Label>USERNAME</Label>

Props

Prop	Type	Default	Description
variant	`'default' \| 'required' \| 'optional' \| 'disabled'`	`'default'`	Visual variant
size	`'sm' \| 'md' \| 'lg'`	`'md'`	Label size
required	`boolean`	`false`	Show required indicator (*)
optional	`boolean`	`false`	Show optional indicator
children	`React.ReactNode`	-	Label content
className	`string`	-	Additional CSS class names

Variants

Basic

<Label>USERNAME</Label>

Required

Email Address

<Label required>EMAIL ADDRESS</Label>

Optional

Nickname(optional)

<Label optional>NICKNAME</Label>

Sizes

Small LabelMedium Label (Default)Large Label

<Label size="sm">Small Label</Label>
<Label size="md">Medium Label</Label>
<Label size="lg">Large Label</Label>

Variants

Default LabelRequired LabelOptional LabelDisabled Label

<Label variant="default">Default</Label>
<Label variant="required">Required</Label>
<Label variant="optional">Optional</Label>
<Label variant="disabled">Disabled</Label>

With Form Fields

<div>
  <Label htmlFor="email" required>EMAIL</Label>
  <Input id="email" type="email" />
</div>
 
<div>
  <Label htmlFor="bio" optional>BIO</Label>
  <TextArea id="bio" />
</div>

On this page