Label

Usage

Pair a <Label> with an input element to provide an accessible label. To associate the label with the form element, wrap the form element within <Label>:

Email address

import { Input } from "stylus-ui/Input";
import { Label } from "stylus-ui/Label";

export default () => (
  <Label className="flex flex-col gap-2">
    Email address
    <Input type="email" />
  </Label>
);

Alternatively, you can pass an id string to the label’s htmlFor prop:

Email address

import { Input } from "stylus-ui/Input";
import { Label } from "stylus-ui/Label";

export default () => (
  <div className="flex flex-col gap-2">
    <Label htmlFor="email">Email address</Label>
    <Input type="email" id="email" />
  </div>
);

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.

API Reference

Label

Inherits properties from HTMLLabelElement.

Prop	Type	Default
asChild	boolean	false
htmlFor	string
theme	"dark""light"	"light"