Skip to catalog content
Mado UI Open-code components

Source-owned · zero runtime dependencies

block · settings-row

Settings row

A responsive explicit-label layout for one native setting control and its supporting description.

Install with npx @madojs/ui@latest add settings-row.

Settings row

Send one summary after each production deployment.

Choose how often activity summaries are prepared.

This value is supplied by the organization administrator.

Composition

  • Pair a content group containing an explicit label/description with one native control in the control group.

Public API

class mado-ui-settings-row / content / label / description / control
Responsive label-copy-control composition.
attribute aria-describedby
Connects the native control to supporting copy when useful.

Detected public classes

  • .mado-ui-settings-row
  • .mado-ui-settings-row-content
  • .mado-ui-settings-row-control
  • .mado-ui-settings-row-description
  • .mado-ui-settings-row-label

Detected public CSS properties

  • --mado-ui-color-border
  • --mado-ui-color-text
  • --mado-ui-color-text-muted
  • --mado-ui-settings-row-align
  • --mado-ui-settings-row-border
  • --mado-ui-settings-row-color
  • --mado-ui-settings-row-content-basis
  • --mado-ui-settings-row-content-gap
  • --mado-ui-settings-row-description-color
  • --mado-ui-settings-row-gap
  • --mado-ui-settings-row-justify
  • --mado-ui-settings-row-label-color
  • --mado-ui-settings-row-label-size
  • --mado-ui-settings-row-padding-block
  • --mado-ui-space-1
  • --mado-ui-space-4

Accessibility contract

  • The explicit label for/id relationship owns activation and naming; the row itself is not a control.
  • Keep description ids unique and reference them only while the corresponding nodes exist.

Keyboard

  • The recipe adds no composite keyboard model; native interactive descendants keep their browser-defined keys and Tab order.

Focus

  • Focus remains on native links, buttons or controls. Presentational wrappers never become focusable.

Fallback

  • Without the copied stylesheet, the semantic source HTML remains readable and operable.

Installation graph

Direct dependencies

Resolved install order

Copied source

The CLI resolves each registry source path into the configured project target. Links below point to the exact catalog build tag.