Lenso UI

Product component · Forms

Settings Row

A consistent preference row that composes Select, Switch, Button, or consumer-owned controls.

Live playground

Setting title

Supporting description for this preference.

Choose the control by behavior

  • Use Switch for immediate binary preferences and Select for bounded choices.
  • Use the Action slot for secondary configuration flows.

  • Use Label when the title should activate the control—typically Switch. Use Title when it should only name the control—typically Select or a secondary action.

Accessibility

  • Title, Label, and Control share generated IDs. Label also natively activates a labelable trailing control; Title does not.

  • Pass disabled state to both the row and its interactive control.

Implementation

Title names the Select through generated IDs without opening it when the title is clicked.

import { Select } from "@lenso/ui/select";
import { SettingsRow } from "@lenso/ui/settings-row";

<SettingsRow.Root>
  <SettingsRow.Copy>
    <SettingsRow.Title>Region</SettingsRow.Title>
    <SettingsRow.Description>Choose where project data is stored.</SettingsRow.Description>
  </SettingsRow.Copy>
  <SettingsRow.Control>
    {({ controlId, disabled, labelId }) => (
      <Select.Root defaultValue="us" disabled={disabled}>
        <Select.Trigger aria-labelledby={labelId} id={controlId}>
          <Select.Value />
          <Select.Icon />
        </Select.Trigger>
      </Select.Root>
    )}
  </SettingsRow.Control>
</SettingsRow.Root>;

Implementation

Label uses native label activation for Switch. Control exposes generated IDs and coordinated hover state without DOM lookup or dataset mutation.

import { SettingsRow } from "@lenso/ui/settings-row";
import { Switch } from "@lenso/ui/switch";

<SettingsRow.Root>
  <SettingsRow.Copy>
    <SettingsRow.Label>Allow background tasks</SettingsRow.Label>
    <SettingsRow.Description>Continue work after closing this view.</SettingsRow.Description>
  </SettingsRow.Copy>
  <SettingsRow.Control>
    {({ controlId, disabled, labelId, visualState }) => (
      <Switch.Root
        aria-labelledby={labelId}
        data-visual-state={visualState}
        disabled={disabled}
        id={controlId}
        layout="control-only"
      >
        <Switch.Thumb />
      </Switch.Root>
    )}
  </SettingsRow.Control>
</SettingsRow.Root>;
Lenso UI