Label

Overview

Label is the shared label primitive used across @fsai/shared-ui.

It is commonly used as the low-level building block behind labeled fields such as:

Input
Select
AutocompleteSelect

It is not exclusive to form controls. Use Label anywhere a semantic label element and the standard label styling are appropriate.

Basic Usage

import { Label, InputPrimitive } from '@fsai/shared-ui';

<div>
  <Label htmlFor="website">Website</Label>
  <InputPrimitive id="website" placeholder="https://example.com" />
</div>

Outside Form Fields

Label can also be used in custom labeled UI where the semantics still make sense:

<div>
  <Label htmlFor="filters">Filters</Label>
  <div id="filters">{/* custom filter controls */}</div>
</div>

Disabled Label

Set disabled when the associated field is disabled and the label should visually match.

<div>
  <Label htmlFor="location-name" disabled>
    Location Name
  </Label>
  <InputPrimitive id="location-name" disabled />
</div>

How It Is Used

Label is often handled for you when using higher-level field components.

Those components already render it internally:

Component	How `Label` is used
`Input`	Renders the field label above the input and supports `labelIcon` / required state handling
`Select`	Renders the field label above the trigger and supports `labelIcon` / required state handling
`AutocompleteSelect`	Renders the field label above the trigger/input and supports `labelIcon` / required state handling

Use Label directly when:

you are using InputPrimitive instead of Input
you are building a custom field around Picker
you need a label for a nonstandard control or labeled UI region

Props

Prop	Type	Default	Description
`children`	`ReactNode`	—	Required. Label content.
`htmlFor`	`string`	—	Associates the label with a form control id.
`disabled`	`boolean`	`false`	Applies disabled label styling.
`className`	`string`	—	Additional classes.

All other standard label HTML attributes are supported.

Styling Behavior

Default label styling includes:

text-subtle
medium font weight
left-aligned text
inline-flex layout for icons and text
bottom margin suitable for stacked fields

When disabled is set, the text shifts to the disabled/faint token.

When To Use Label Directly

Use Label directly when the surrounding UI needs a semantic label and a higher-level component is not already rendering one for you.

Do not wrap:

Input
Select
AutocompleteSelect

with another Label, because those components already handle labeling themselves.

Guidelines

Do use htmlFor whenever there is a real input id to connect
Do use Label with InputPrimitive and other low-level controls
Do use Label outside traditional forms when a semantic label element still fits the UI
Do pass disabled when the associated control is disabled
Don't add a second Label around components that already render one
Don't use placeholder text as a substitute for a label

Label

On this page