Control label

Pairs a label with a control. Use label-placement="end" for checkbox, switch, and radio; use "top" or "start" for text fields.

<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

PropTypeDefaultDescription
labelstringText next to or above the control.
descriptionstringOptional helper under the label.
label-placement"end" | "start" | "top""end"end = control then label (checkbox). start = label then control. top = label above the control.