ControlLabel

PreviousNext

Label paired with a control (switch, checkbox).

import { ControlLabel, Switch } from "@/rl-ui";

<ControlLabel label="Email digests" control={<Switch defaultChecked />} />

Examples

Label placement

import { ControlLabel, Switch } from "@/rl-ui";

<>
<ControlLabel label="Label end" labelPlacement="end" control={<Switch defaultChecked />} />
<ControlLabel label="Label start" labelPlacement="start" control={<Switch defaultChecked />} />
</>

With description

import { ControlLabel, Checkbox } from "@/rl-ui";

<ControlLabel
label="Weekly summary"
description="Sent every Monday morning."
control={<Checkbox defaultChecked />}
/>

API

PropTypeDefaultDescription
labelReactNode—Label text (required).
controlReactElement—Control element (required).
labelPlacement"end" | "start""end"Label relative to control.
verticalAlignment"top" | "middle""top"Cross-axis alignment.
descriptionReactNode—Secondary description.
disabledbooleanfalseDimmed / non-interactive presentation.