Sara UI

RadioSelector

Allows to select one option of many.

Svelte

daisyUI

Both

Example

Example.svelte

<script lang="ts">
  import { RadioSelector, type SelectorOption } from "saraui"

  const options: SelectorOption[] = [
    { label: "Svelte", value: "svelte" }, 
    { label: "daisyUI", value: "daisyui"},
    { label: "Both", value: "both" }
  ]

  //start with 'both' selected
  let selected = "both"
</script> 

<div class="w-fit grid grid-cols-3 gap-4">
  <RadioSelector {options}
    name="favourite" 
    bind:state={selected} 
  />
</div>

CheckboxSelector (added in v1.3)

Allows to select a range of options.

Select at leat 1 fruit (max: 2).

Orange

Apple

Banana

Strawberry

Example

Example.svelte

<script lang="ts">
  import { CheckboxSelector, type SelectorOption } from "saraui"

  let selectedOptions: string[]

  const options: SelectorOption[] = [
    { label: "Blue", value: "blue" }, 
    { label: "Orange", value: "orange" }, 
    { label: "purple", value: "purple" }
  ]
</script>

<CheckboxSelector {options} 
  bind:state={selectedOptions}
  min={1} max={2} 
  isRequired 
/>

InputSelector (added in v1.4)

Allows to select one option of many.

Example

Example.svelte

<script lang="ts">
  import { InputSelector, type SelectorOption } from "saraui"

  const options: SelectorOption[] = [
    { label: "Cat", value: "cat" },
    { label: "Dog", value: "dog" },
    { label: "Snake", value: "snake" }
  ]
</script>

<InputSelector {options} 
  placeholder="Select your mascot"
  name="mascot"
/>

Props

options:

SelectorOption[]

isRequired?:

boolean

isDisabled?:

boolean

state?:

string

size?:

"xs" | "sm" | "md" | "lg"

color?:

(RadioSelector & InputSelector) name:

string

name is used to identify the value in a FormData, in case of CheckboxSelector you'll have to validate every checkbox in the backend or send the selected values gotten through bind:state

(CheckboxSelector) min?:

number

(CheckboxSelector) max?:

number