# Settings row What a settings page is made of: a label, one sentence under it and the control at the end, ruled like the list with a hairline between rows and nothing else drawn. A row with a switch or a check is one label, so pressing anywhere on it turns the control; a row with a key, a select or a value is a plain box, so a press means what the key says. Kit part · Free · https://tactileui.dev/parts/settings-row - Element: `` - Needs: `kit.css` only, no script ([how to install the kit](https://tactileui.dev/docs/installation#the-kit)) - Categories: Forms, Lists - Finishes: Aluminium, Graphite, Oak, Walnut, Porcelain, Black, Daylight, Night, Paper, Phosphor, E-paper, AMOLED - Volumes: Tactile, Quiet ## Variants ### A switch · the row is the label ```html

Email receiptsSend a receipt after every payment.

``` ### A check ```html

Remember this deviceStay signed in for thirty days.

``` ### A key at the end ```html

Two-step sign-inAsk for a code from your phone.

``` ### A select at the end ```html

LanguageThe words in your dashboard.

``` ### A value and a key ```html

Billing planTeam, billed monthly.£12 a seat

``` ### Danger · the words say so ```html

Delete this workspaceRemoves every project and cannot be undone.

``` ### A page of rows · with headings ```html

Notifications

Email receiptsWeekly summary

``` ### Disabled ```html

Weekly summaryTurned off by your administrator.

Notifications

Email receipts Send a receipt after every payment.

Two-step sign-in Ask for a code from your phone.

``` The demo on the page: ```html

Settings · NorthwindSaved

Notifications

Email receiptsSend a receipt after every payment. Weekly summaryA short note on Monday mornings. Failed paymentsTell me the moment a charge fails.

Account

LanguageThe words in your dashboard.

Two-step sign-inAsk for a code from your phone.Off

Delete this workspaceRemoves every project and cannot be undone.

Nothing changed yet

``` ## Usage notes Press the words of a row, not just the switch: the whole row is the control. The language and the sign-in rows hold a select and a key instead, so they are not one big target. The last row is the one that cannot be undone, so its words say so. ## Accessibility - A row that holds a switch is a ``, so the whole row is the target and the pointer, a finger and a switch-access device all reach it; on a phone the row is at least 64px tall. - The switch is named by the title with `aria-labelledby` and described by the sentence with `aria-describedby`, so it reads “Email receipts, switch, on, Send a receipt after every payment” and not the title and sentence run together as a name. - The state is the switch’s own position and its lit slot, and a screen reader hears “on” or “off”; no sentence changes with the state, so the words never contradict the control. - A key row is not a label on purpose: pressing the words does nothing, and the key is named by its words with the title as its description, “Set up, two-step sign-in”. - The focus ring goes round the whole label row when the switch has the focus, and round the key or select alone in a plain row. A disabled row dims its words and is skipped by the keyboard. ## How it’s built The list already knows how to be a rack of rows with hairlines between them, so the settings row borrows its rule exactly: a one-pixel line, inset to the words, that vanishes under the row the pointer is on. The controls are the kit’s own, a switch, a check, a key and a select, set in the row’s end with auto margin. The row is a flex box that wraps, so on a narrow screen a wide control drops under its words instead of squeezing them. ## Rules Lay out a settings page as rows that say what each setting does in a sentence, with the control where the eye ends up, and a whole row to press. The full rules are in `settings-row.rules.md` in the brain, which ships with the Kit. ## Related parts - [Switch](https://tactileui.dev/parts/switch): On or off, applied the moment it moves. A native checkbox with a ridged thumb in a slot that lights green when on. - [List](https://tactileui.dev/parts/list): Rows in a rack: a mark, a title, a second line and a fact or a key at the end. Chosen rows sink into a recess with their check key latched; in a running order, a row lifts out of the rack on its skirt and slides past the others, from the keyboard or by its grip. - [Check](https://tactileui.dev/parts/check): An option in a form: a small square key that presses below the plate when chosen, with a tick printed on it. - [Field](https://tactileui.dev/parts/field): Text entry in a recess, the label printed above it, and a hint that says how to fix an error.