SettingRow

One line of a settings list: the title and explanation on the left, any control on the right. On a narrow screen the control moves below.

PreviewLink to the section Preview

Live in all three themes. Everything here is interactive.

Interface language

Applies to menus and messages after a reload.

Defaults

Restores every setting in this section.

Interface language

Applies to menus and messages after a reload.

Defaults

Restores every setting in this section.

Interface language

Applies to menus and messages after a reload.

Defaults

Restores every setting in this section.

tsx

import { SettingRow } from '@skribly/ui/forms'

tsx

<SettingRow title="Interface language" description="Applies after a reload.">
  {(control) => <select {...control}>…</select>}
</SettingRow>

Every label is a prop, so the app passes its own words in its own language. See no built-in text.

Pass a function to get aria-labelledby and aria-describedby for the control, so the row title names it.
Rows are separated by a border, not only by spacing.

This demo runs through axe in all three themes on every test run. See what the tests check.