Sections
Components
- Alert banner
- Alert dialog
- Alert
- Avatar
- Badge
- Breadcrumb
- Button
- Calendar icon
- Cell layout
- Cell link
- Checkbox
- Collapse
- Control label
- Date picker
- Dialog
- Divider
- Drawer
- Empty cell
- Empty state
- Empty
- Error overlay
- Filter bar
- Filter chips
- Flex
- Grid layout
- Humanised date
- Icon
- Duration input
- Input field
- Input
- Label
- Loader
- More actions
- Number input
- Outside click
- Page loader
- Page
- Popconfirm
- Popover
- Progress pie
- Progress
- Radio button group
- Radio Group
- Radio
- Relative time
- Resizable
- Search input
- Select
- Skeleton text
- Skeleton
- Space
- Squad avatar list
- Status picker
- Stepper
- Switch
- Content switcher
- Table light
- Tabs
- Tag
- Text
- Textarea
- Toast
- Tooltip
- Trigger select
- Upload
<rl-control-label label="Billable"><rl-checkbox checked></rl-checkbox></rl-control-label>Examples#
Checkbox#
<rl-control-label label="Accept terms" description="Required to continue">
<rl-checkbox></rl-checkbox>
</rl-control-label>Switch#
<rl-control-label label="Email notifications">
<rl-switch checked></rl-switch>
</rl-control-label>Radio#
<rl-control-label label="Default address">
<rl-radio value="home" checked></rl-radio>
</rl-control-label>Input#
<rl-control-label label="Email" label-placement="top">
<rl-input placeholder="you@acme.com"></rl-input>
</rl-control-label>Textarea#
<rl-control-label label="Notes" label-placement="top">
<rl-textarea placeholder="Add a note" rows="3"></rl-textarea>
</rl-control-label>Number input#
<rl-control-label label="Quantity" label-placement="start">
<rl-number-input value="2" min="0"></rl-number-input>
</rl-control-label>Select#
<rl-control-label label="Plan" label-placement="top">
<rl-select placeholder="Choose a plan">
<rl-option value="free">Free</rl-option>
<rl-option value="pro">Pro</rl-option>
</rl-select>
</rl-control-label>Date picker#
<rl-control-label label="Start date" label-placement="top">
<rl-date-picker placeholder="Pick a date"></rl-date-picker>
</rl-control-label>API#
| Prop | Type | Default | Description |
|---|---|---|---|
label | string | — | Text next to or above the control. |
description | string | — | Optional helper under the label. |
label-placement | "end" | "start" | "top" | "end" | end = control then label (checkbox). start = label then control. top = label above the control. |