YuhuanStudioYunUIDocs
Patterns

Setting Row

One labelled row in a settings / preferences list — a title, optional description, and a trailing control slot (Switch, Select, button). Stack several; a divider separates them.

One labelled row in a settings / preferences list: a title, an optional description, and a trailing control slot — a Switch, a Select, a button. Stack several inside a card; the bottom border divides them and the last one drops it. Presentation only — the host owns the control and its state.

Import

import { SettingRow } from "@yuhuanowo/yunui/patterns";

Example

Pass any control into the control slot. The description wraps under the title and is optional.

SettingRow

Email notifications
Receive a summary of account activity in your inbox.
Push notifications
Get notified on your devices the moment something happens.
Weekly digest

Props

PropTypeDefaultDescription
classNamestring
controlReactNodeThe trailing control (e.g. a `<Switch>`).
descriptionReactNode
title*ReactNode

On this page