Selection controls

Selection controls allow the user to select options.

Checkboxes

prop	description	type	Default value
value	Input value	Boolean	null
color	Color variant, accepts any of the main colors described in Tailwind config	String	primary
label	Input label	String	Empty string
checked	Checked state	Boolean	false
disabled	Disabled state	Boolean	false
classes	Classes to pass down to checkbox wrapper	String	inline-flex items-center mb-2 cursor-pointer z-10

Radio buttons

prop	description	type	Default value
value	Input value	Boolean	null
color	Color variant, accepts any of the main colors described in Tailwind config	String	primary
label	Input label	String	Empty string
selected	Selected state	Boolean	false
disabled	Disabled state	Boolean	false
classes	Classes to pass down to radio button wrapper	String	inline-flex block items-center mb-2 cursor-pointer z-0

Switches

prop	description	type	Default value
value	Input value	Boolean	null
color	Color variant, accepts any of the main colors described in Tailwind config	String	primary
label	Input label	String	Empty string
disabled	Disabled state	Boolean	false
classes	Classes to pass down to checkbox wrapper	String	inline-flex block items-center mb-2 cursor-pointer z-0
trackClasses	Track classes	String	relative w-10 h-auto z-0 rounded-full overflow-visible flex items-center justify-center
thumbClasses	Thumb classes	String	rounded-full p-2 w-5 h-5 absolute shadow duration-100
labelClasses	Tabel classes	String	pl-2 cursor-pointer

<script>
  import {
    Checkbox,
    RadioButtonGroup,
    Switch
  } from "smelte";
</script>

<h5 class="pb-8 pt-10" id="checkboxes">Checkboxes</h5>

<Checkbox label="A checkbox" />
<Checkbox color="secondary" label="A colored checkbox" />
<Checkbox disabled label="A disabled checkbox" />

<h5 class="pb-8 pt-10" id="radio-buttons">Radio buttons</h5>

<RadioButtonGroup
  name="test"
  items={[{ value: 1, label: 'One' }, { value: 2, label: 'Two' }]} />

<RadioButtonGroup
  name="Colored test"
  color="blue"
  items={[{ value: 1, label: 'One' }, { value: 2, label: 'Two' }]} />

<RadioButtonGroup
  name="test-disabled"
  disabled
  items={[{ value: 1, label: 'One' }, { value: 2, label: 'Two' }]} />

<h5 class="pb-8 pt-10" id="switches">Switches</h5>

<Switch />

<Switch color="error" />