Installation

Barrel

Granular

Usage

With Form Components (Recommended)

Label features are automatically available through form components like `Input`, `Select`, `Checkbox`, and `Switch` via the `required` and `labelTooltip` props.

export default function Example() {
  return (
    <>
      {/* Optional field with "(optional)" text */}
      <Input label="Phone" required={false} placeholder="+1 555-0000" />

      {/* With tooltip */}
      <Input
        label="API Key"
        labelTooltip="Find this in your dashboard settings"
/>
    </>
  );
}

Standalone Label

For custom form layouts, use the Label component directly.

export default function Example() {
  return <Label tooltip="This field is mandatory">Username</Label>;
}

Examples

Optional Field

Shows gray "(optional)" text when required={false}.

With Tooltip

Shows an info icon with a tooltip for additional context.

ReactNode Label Content

Labels support ReactNode content for rich formatting.

Form with Mixed Fields

Real-world example showing required and optional fields together.

Standalone Label

Use Label directly for custom layouts or non-form contexts.

API Reference

Label Props

Props for the standalone Label component:

Form Component Label Props

These props are available on Input, InputArea, Select, Checkbox, Switch, SensitiveInput, and Combobox:

Design Guidelines

  ### When to Use Optional Indicators

  <ul class="ml-4 list-disc space-y-1">
    <li>
      Use "(optional)" for optional fields when most fields are required
    </li>
    <li>Be consistent within a form</li>
    <li>Default fields (no indicator) are assumed required by users</li>
  </ul>



  ### When to Use Tooltips

  <ul class="ml-4 list-disc space-y-1">
    <li>Provide additional context that doesn't fit in the label</li>
    <li>Explain format requirements or validation rules</li>
    <li>Link to help documentation for complex fields</li>
    <li>Keep tooltip content concise - 1-2 sentences max</li>
  </ul>



  ### Accessibility

  <ul class="ml-4 list-disc space-y-1">
    <li>
      Optional indicators are purely visual - use the `required` attribute
      for validation
    </li>
    <li>Tooltips are accessible via keyboard focus on the info icon</li>
    <li>Screen readers will announce tooltip content when focused</li>
  </ul>