Label

Label

The Label component provides an accessible text label for form controls. It can communicate the purpose of an input and indicate whether a field is required.

import Input from "rocksolidjs/Input";
import Label from "rocksolidjs/Label";

export default function Example() {
  return (
    <div class="flex flex-col gap-1">
      <Label for="name">Name</Label>
      <Input
        id="name"
        placeholder="Enter your name"
      />
    </div>
  );
}

Examples

Colors

Use the color prop to communicate the semantic state or meaning of the label.

import Input from "rocksolidjs/Input";
import Label from "rocksolidjs/Label";

export default function Example() {
  return (
    <div class="flex flex-col gap-4">
      <div class="flex flex-col gap-1">
        <Label for="default-email" color="default">
          Email address
        </Label>
        <Input
          id="default-email"
          type="email"
          placeholder="you@example.com"
          fullWidth
        />
      </div>
      <div class="flex flex-col gap-1">
        <Label for="success-email" color="success">
          Email address
        </Label>
        <Input
          id="success-email"
          type="email"
          value="john@example.com"
          fullWidth
        />
      </div>
      <div class="flex flex-col gap-1">
        <Label for="warning-email" color="warning">
          Email address
        </Label>
        <Input
          id="warning-email"
          type="email"
          value="john@example"
          fullWidth
        />
      </div>
      <div class="flex flex-col gap-1">
        <Label for="info-email" color="info">
          Email address
        </Label>
        <Input
          id="info-email"
          type="email"
          placeholder="Enter your email"
          fullWidth
        />
      </div>
      <div class="flex flex-col gap-1">
        <Label for="error-email" color="error">
          Email address
        </Label>
        <Input
          id="error-email"
          type="email"
          value="invalid-email"
          fullWidth
        />
      </div>
    </div>
  );
}

Sizes

Use the size prop to control the visual size of the label.

import Input from "rocksolidjs/Input";
import Label from "rocksolidjs/Label";

export default function Example() {
  return (
    <div class="flex flex-col gap-4">
      <div class="flex flex-col gap-1">
        <Label for="small-name" size="small">
          Name
        </Label>
        <Input
          id="small-name"
          size="small"
          placeholder="Small input"
        />
      </div>
      <div class="flex flex-col gap-1">
        <Label for="medium-name" size="medium">
          Name
        </Label>
        <Input
          id="medium-name"
          size="medium"
          placeholder="Medium input"
        />
      </div>
      <div class="flex flex-col gap-1">
        <Label for="large-name" size="large">
          Name
        </Label>
        <Input
          id="large-name"
          size="large"
          placeholder="Large input"
        />
      </div>
    </div>
  );
}

Required

Use the required prop to indicate that the associated form field is required.

import Input from "rocksolidjs/Input";
import Label from "rocksolidjs/Label";

export default function Example() {
  return (
    <div class="flex flex-col gap-1">
      <Label for="email" required>
        Email address
      </Label>
      <Input
        id="email"
        type="email"
        placeholder="you@example.com"
      />
    </div>
  );
}

When required is enabled, the Label displays a required indicator.

Associating a Label with a Form Control

Use the for prop to associate the Label with a form control.

The value of for should match the id of the associated form control.

import Input from "rocksolidjs/Input";
import Label from "rocksolidjs/Label";

export default function Example() {
  return (
    <div class="flex flex-col gap-1">
      <Label for="username">
        Username
      </Label>
      <Input
        id="username"
        placeholder="Enter your username"
      />
    </div>
  );
}
<Label for="email">Email address</Label>
<Input id="email" type="email" />

Associating labels with their controls improves usability and accessibility by allowing users to identify the purpose of the control and activate the control by interacting with its label.

Disabled

Use the disabled prop to indicate that the label is disabled.

import Input from "rocksolidjs/Input";
import Label from "rocksolidjs/Label";

export default function Example() {
  return (
    <div class="flex flex-col gap-1">
      <Label for="company" disabled>Company</Label>
      <Input
        id="company"
        placeholder="Enter your company"
        disabled
      />
    </div>
  );
}

Truncation

Use the truncate prop to control whether long label text is truncated.

import Input from "rocksolidjs/Input";
import Label from "rocksolidjs/Label";

export default function Example() {
  return (
    <div class="flex flex-col gap-4">
      <div class="w-64">
        <Label for="address-1" class="mb-1" truncate required>
          Complete residential or business address
        </Label>
        <Input
          id="address-1"
          placeholder="Enter your address"
          fullWidth
        />
      </div>
      <div class="w-64">
        <Label for="address-2" class="mb-1">
          Complete residential or business address
        </Label>
        <Input
          id="address-2"
          placeholder="Enter your address"
          fullWidth
        />
      </div>
    </div>
  );
}

Accessibility

  • Use a Label to clearly identify the purpose of an associated form control.
  • Use the for prop to associate the Label with a form control when the control is not nested within the label.
  • Ensure the value of for matches the id of the associated control.
  • Use required to communicate that a field is required, but also enforce the requirement through the form control and validation logic.
  • Do not rely on color alone to communicate important information.
  • Avoid truncating labels when the hidden text contains information necessary to understand or complete the form.

API

Label

The Label component supports semantic colors, visual sizes, required field indicators, text truncation, and association with form controls.

Prop Type Required Default Description
children JSXElement No — Content displayed inside the Label.
class string No — Additional CSS classes applied to the label.
color "default" | "success" | "warning" | "info" | "error" No "default" Controls the semantic color and styling of the label.
disabled boolean No false Indicates that the label is disabled and applies the disabled styling.
for string No — Associates the label with a form control by matching its id.
required boolean No false Indicates that the associated form field is required.
size "small" | "medium" | "large" No "medium" Controls the visual size of the label.
truncate boolean No false Truncates the label text when it exceeds the available space.
  • Input — Use Input for single-line text entry.
  • Textarea — Use Textarea for multi-line text entry.