Checkbox, Radio, Switch

Checkboxes and radios in every semantic color and the flat, square, circle styles, groups, and switches.

Checkbox & radio

Checkbox & radio

Vue

<div class="thl-stack">
  <div class="thl-demo-row"><ThlCheckbox v-model="a" :label="`Checked: ${a}`" /><ThlCheckbox indeterminate label="Indeterminate" /><ThlCheckbox disabled label="Disabled" /></div>
  <div class="thl-demo-row"><ThlCheckbox v-for="c in colors" :key="c" :color="c" :model-value="true" :label="c" /></div>
  <div class="thl-demo-row"><ThlCheckbox v-for="s in ['flat','square','circle']" :key="s" :skin="s" color="success" :model-value="true" :label="s" /></div>
  <ThlCheckboxGroup v-model="group" :options="[{ label: 'A', value: 'a' }, { label: 'B', value: 'b' }, { label: 'C (disabled)', value: 'c', disabled: true }]" />
  <ThlRadioGroup v-model="gender" color="info" :options="[{ label: 'Male', value: 'm' }, { label: 'Female', value: 'f' }, { label: 'Other', value: 'o' }]" />
</div>

React

<Checkbox checked={a} onChange={setA} label="Checked" />
<Checkbox color="success" skin="flat" defaultChecked label="flat" />
<CheckboxGroup value={group} onChange={setGroup} options={[{ label: 'A', value: 'a' }, { label: 'B', value: 'b' }]} />
<RadioGroup value={gender} onChange={setGender} color="info" options={genders} />

Angular

<thl-checkbox [(checked)]="a" label="Checked" />
<thl-checkbox color="success" skin="flat" [checked]="true" label="flat" />
<thl-checkbox-group [(value)]="group" [options]="opts" />
<thl-radio-group formControlName="gender" color="info" [options]="genders" />

Switch

Switch

Vue

<div class="thl-stack">
  <ThlSwitch v-model="on" :label="`Switch: ${on}`" />
  <div class="thl-demo-row"><ThlSwitch v-for="c in colors" :key="c" :color="c" :model-value="true" /></div>
  <div class="thl-demo-row"><ThlSwitch size="sm" :model-value="true" /><ThlSwitch :model-value="true" /><ThlSwitch size="lg" :model-value="true" /><ThlSwitch disabled /></div>
</div>

React

<Switch checked={on} onChange={setOn} label="Switch" />
<Switch color="success" size="lg" defaultChecked />

Angular

<thl-switch [(checked)]="on" label="Switch" />
<thl-switch color="success" size="lg" [checked]="true" />

API

Checkbox

<ThlCheckbox> · import { ThlCheckbox } from '@thl-ui/vue'

Prop	Type	Default
modelValue	any	—
value	any	—
color	string	—
label	string	—
indeterminate	boolean	—
skin	string	—
disabled	boolean	—

Events: update:modelValuechange

Slots: default

Radio

<ThlRadio> · import { ThlRadio } from '@thl-ui/vue'

Prop	Type	Default
modelValue	any	—
value	any	—
color	string	—
label	string	—
skin	string	—
disabled	boolean	—
name	string	—

Events: update:modelValue

Slots: default

CheckboxGroup

<ThlCheckboxGroup> · import { ThlCheckboxGroup } from '@thl-ui/vue'

Prop	Type	Default
modelValue	array	—
options*	array	—
color	string	—
vertical	boolean	—

Events: update:modelValue

RadioGroup

<ThlRadioGroup> · import { ThlRadioGroup } from '@thl-ui/vue'

Prop	Type	Default
modelValue	any	—
options*	array	—
color	string	—
vertical	boolean	—
name	string	—

Events: update:modelValue

Switch

<ThlSwitch> · import { ThlSwitch } from '@thl-ui/vue'

Prop	Type	Default
modelValue	boolean	—
color	string	—
size	string	—
label	string	—
disabled	boolean	—

Events: update:modelValue