Label

A form label component that can be associated with form controls to improve accessibility.

How to Import

Add this import to your component file

app/page.tsx

1import { Label } from '@/components/lightswind/label';

Props

Properties and options for customizing this component

Name	Type	Default	Description	Required

htmlFor	string	-	The ID of the form control this label is associated with.	Optional
required	boolean	false	When true, indicates that the associated form control requires user input.	Optional
disabled	boolean	false	When true, visually shows the label as disabled.	Optional

Basic Usage

Here’s a simple example of how to use this component

app/page.tsx

1import { Label } from '@/components/lightswind/label';
2import { Input } from '@/components/lightswind/input';
3
4export function LabelDemo() {
5  return (
6    <div className="grid w-full max-w-sm items-center gap-1.5">
7      <Label htmlFor="email">Email</Label>
8      <Input type="email" id="email" placeholder="Email" />
9    </div>
10  );
11}

Previousinput-otp

Nextradio-group

A product byＭＵＨＩＬＡＮ and Team❤️.

Label

A form label component that can be associated with form controls to improve accessibility.

...

How to Import

Add this import to your component file

app/page.tsx

1import { Label } from '@/components/lightswind/label';

Props

Properties and options for customizing this component

Name	Type	Default	Description	Required

htmlFor	string	-	The ID of the form control this label is associated with.	Optional
required	boolean	false	When true, indicates that the associated form control requires user input.	Optional
disabled	boolean	false	When true, visually shows the label as disabled.	Optional

Basic Usage

Here’s a simple example of how to use this component

app/page.tsx

1import { Label } from '@/components/lightswind/label';
2import { Input } from '@/components/lightswind/input';
3
4export function LabelDemo() {
5  return (
6    <div className="grid w-full max-w-sm items-center gap-1.5">
7      <Label htmlFor="email">Email</Label>
8      <Input type="email" id="email" placeholder="Email" />
9    </div>
10  );
11}

Previousinput-otp

Nextradio-group

A product byＭＵＨＩＬＡＮ and Team❤️.

Label

How to Import

Props

Basic Usage

On This Page

Contribute

Label

How to Import

Props

Basic Usage

On This Page

Contribute

React Label Component - Lightswind UI

Key Details of React Label

Label

How to Import

Props

Basic Usage

On This Page

Contribute

Label

How to Import

Props

Basic Usage

On This Page

Contribute