Smelte logo
SMELTE
Github Smelte

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 elevation-3 duration-100
labelClasses Tabel classes String pl-2 cursor-pointer
<script>
  import { 
    Checkbox,
    RadioButton,
    Switch,
    Icon,
   } 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>

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

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

<RadioButton
  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" />