Radio

One choice out of a few, with every option visible at once.

<script setup lang="ts">
import { FsField, FsRadio, FsRadioGroup } from '@fivespark/ui'
import { ref } from 'vue'

const moment = ref<string>()
</script>

<template>
  <FsField label="Moment van levering" class="w-full max-w-sm">
    <FsRadioGroup v-model="moment">
      <FsRadio label="Ochtend" value="ochtend" />
      <FsRadio label="Middag" value="middag" />
      <FsRadio label="Avond" value="avond" />
    </FsRadioGroup>
  </FsField>
</template>

Usage

<script setup lang="ts">
import { FsField, FsRadio, FsRadioGroup } from '@fivespark/ui'
import { ref } from 'vue'

const levering = ref<string>()
</script>

<template>
  <FsField label="Levering">
    <FsRadioGroup v-model="levering">
      <FsRadio label="Bezorgen" value="bezorgen" />
      <FsRadio label="Ophalen" value="ophalen" />
    </FsRadioGroup>
  </FsField>
</template>

Radios always live in an FsRadioGroup, which holds the value and, inside a Field, gives the group its label. Nothing is selected until the user chooses, so preselect only a known answer. For several choices use Checkbox; for a long list use Select.

Examples

With a description

A line under an option says what choosing it means.

<script setup lang="ts">
import { FsField, FsRadio, FsRadioGroup } from '@fivespark/ui'
import { ref } from 'vue'

const moment = ref<string>()
</script>

<template>
  <FsField label="Moment van levering" class="w-full max-w-sm">
    <FsRadioGroup v-model="moment">
      <FsRadio label="Ochtend" value="ochtend" description="Tussen 8:00 en 12:00" />
      <FsRadio label="Middag" value="middag" description="Tussen 12:00 en 17:00" />
      <FsRadio label="Avond" value="avond" description="Tussen 17:00 en 21:00" />
    </FsRadioGroup>
  </FsField>
</template>

Horizontal

For a few short options. The group's orientation is vertical by default.

<script setup lang="ts">
import { FsField, FsRadio, FsRadioGroup } from '@fivespark/ui'
import { ref } from 'vue'

const tarief = ref<string>()
</script>

<template>
  <FsField label="Btw-tarief" class="w-full max-w-sm">
    <FsRadioGroup v-model="tarief" orientation="horizontal">
      <FsRadio label="0%" value="0" />
      <FsRadio label="9%" value="9" />
      <FsRadio label="21%" value="21" />
    </FsRadioGroup>
  </FsField>
</template>

Required and invalid

required and the error belong to the field around the group, not to a single radio.

<script setup lang="ts">
import { FsField, FsRadio, FsRadioGroup } from '@fivespark/ui'
import { ref } from 'vue'

const betaling = ref<string>()
</script>

<template>
  <FsField label="Betaalwijze" required error="Kies een betaalwijze." class="w-full max-w-sm">
    <FsRadioGroup v-model="betaling">
      <FsRadio label="Op factuur" value="factuur" />
      <FsRadio label="Vooraf betalen" value="vooraf" />
    </FsRadioGroup>
  </FsField>
</template>

Disabled option

Disable a single option when it is temporarily unavailable, and say why. Put disabled on the group to disable them all.

<script setup lang="ts">
import { FsField, FsRadio, FsRadioGroup } from '@fivespark/ui'
import { ref } from 'vue'

const levering = ref('bezorgen')
</script>

<template>
  <FsField label="Levering" class="w-full max-w-sm">
    <FsRadioGroup v-model="levering">
      <FsRadio label="Bezorgen" value="bezorgen" />
      <FsRadio label="Ophalen" value="ophalen" disabled description="Alleen mogelijk op werkdagen." />
    </FsRadioGroup>
  </FsField>
</template>

Read-only

readonly on the field shows the choice without letting it change.

<script setup lang="ts">
import { FsField, FsRadio, FsRadioGroup } from '@fivespark/ui'
import { ref } from 'vue'

const levering = ref('bezorgen')
</script>

<template>
  <FsField label="Levering" readonly class="w-full max-w-sm">
    <FsRadioGroup v-model="levering">
      <FsRadio label="Bezorgen" value="bezorgen" />
      <FsRadio label="Ophalen" value="ophalen" />
    </FsRadioGroup>
  </FsField>
</template>

Keyboard

Key	Does
Tab	Moves into the group, on the selected radio or else the first, and out of it
↑, ↓, ←, →	Moves to the next or previous radio and selects it
Space	Selects the focused radio

API Reference

FsRadioGroup

Prop	Type	Default	Description
name	string		Given to every radio. Generated when absent, since the browser groups radios by name.
orientation	"vertical" | "horizontal"	"vertical"	Horizontal for up to three short options without descriptions. They stack when they do not fit.
size	"default" | "dense"		`dense` puts the options closer together; the circle does not change.
invalid	boolean		Marks the group as wrong; the field says why. In a field, the group takes the field's.
required	boolean		One must be chosen. Said on the group, never on the radios, so the browser does not validate it: check it on submit.
disabled	boolean		Unavailable for now, every option with it. In a field, the group takes the field's.
readonly	boolean		Focusable and submitted, its value fixed. Say why in the field's description.
readonlyText	string		Replaces the hidden "alleen lezen" or "read-only" of a group without a field.
modelValue	string		The checked radio's value; undefined while none is, which is where a group starts unless the answer is known.

Event	Payload	Description
update:modelValue	[value: string | undefined]	Sent with the new `modelValue`, for `v-model`.
change	[value: string]	The user chose another radio.

Slot	Props	Description
default	any	The `FsRadio`s.

FsRadio

Prop	Type	Default	Description
value	string	required	Submitted when checked, and the group's `v-model` while it is.
label	string		The visible name. Or the default slot.
description	string		One short sentence under the label. Or the `description` slot.
id	string		In a field too: each radio has its own.
disabled	boolean		This option is unavailable. A disabled group disables every option.

Slot	Props	Description
default	any	The visible name, in place of `label`.
description	any	One short sentence under the label, in place of `description`.