Radios

Radios let you create a radio group.

Make radios easily

You only need two things: a name for the radio group and a list of values to used for your radio items.

<Radios
  name="fav-fruit"
  radios={['apple', 'banana', 'carrot']}
/>

It doesn’t get any easier than this! 😉

Apple

Banana

Carrot

Wrapped in Fieldset, as it should be

Radios wraps radio items in a <fieldset> element since they’re related. You can also provide an optional label with legend.

<Radios
  name="fav-fruit"
  radios={['apple', 'banana', 'carrot']}
/>

<fieldset>
  <legend>Select your favourite fruit:</legend>
  <div class="Radios">
    <!-- Radio 1 -->
    <!-- Radio 2 -->
    <!-- Radio 3 -->
  </div>
</fieldset>

Wrapping radios in fieldset is the right thing to do!

Select your favourite fruit

Apple

Banana

Carrot

Add custom labels easily

If you like to use custom labels for each radio, just pass an array of objects into the radios property instead.

<Radios
  name="fav-fruit"
  radios={[
    { value: 'apple', label: '🍎 Apple'},
    { value: 'banana', label: '🍌 Banana'},
    { value: 'carrot', label: '🥕 Carrot'},
  ]}
/>

🍎 Apple

🍌 Banana

🥕 Carrot

Check, disable, or make any radio item readonly, at your discretion

Just set checked, disabled, or readonly to true for the radio item.

<Radios
  name="fav-fruit-yay"
  legend="Select your favourite fruit:"
  radios={[
    { value: 'apple', checked: true, readonly: true },
    { value: 'banana'},
    { value: 'carrot'},
  ]}
/>

Select your favourite fruit:

Apple

Banana

Carrot

Disable radios — or make them readonly — all at once

The difference between disabled and readonly radios is that disabled radios aren’t sent to the server while readonly radios are.

<Radios
  name="fav-fruit"
  legend="Select your favourite fruit:"
  radios={[
    { value: 'apple', checked: true },
    { value: 'banana'},
    { value: 'carrot'},
  ]}
  readonly
/>

Select your favourite fruit:

Apple

Banana

Carrot

Readonly doesn’t exist as a HTML 5 property. We made it possible by adding a hidden input.

Add an “Others” option with minimal effort

A radiogroup sometimes contain an “others” option that lets a user type into. You can create this simply by adding hasInput to the radios object.

<Radios
  name="fav-fruit"
  legend="Select your favourite fruit:"
  radios={[
    { value: 'apple' },
    { value: 'banana' },
    { value: 'carrot' },
    { value: 'others', hasInput: true },
  ]}
/>

Select your favourite fruit:

Apple

Banana

Carrot

Others

Basic Usage

Radios create multiple radio buttons that are wrapped in a <fieldset>. The required properties are name and radios. If you want to, you can give the group an optional label with legend.

<script>
  import { Radios } from '@splendidlabz/svelte'
</script>

<Radios
  name="fav-fruit"
  legend="Pick your favourite fruit:"
  radios={[
    { value: 'apple', label: '🍎 Apple' },
    { value: 'banana', label: '🍌 Banana' },
    { value: 'carrot', label: '🥕 Carrot' },
  ]}
/>

<fieldset>
  <legend>Pick your favourite fruit:</legend>
  <div>
    <!-- Radio 1 -->
    <!-- Radio 2 -->
    <!-- Radio 3 -->
  </div>
</fieldset>

Value and Label

Each radio needs to have a value while a label is optional. If you don’t provide a label, Radios will create labels for each radio by converting value to Title Case.

<Radios
  name="fav-fruit"
  legend="Pick your favourite fruit:"
  radios={[
    { value: 'apple' },
    { value: 'banana' },
    { value: 'carrot' },
  ]}
/>

For convenience, you can also pass an array of strings to radios. In this case, each value will be set as the value of the checkbox.

<Radios
  name="fav-fruit"
  legend="Pick your favourite fruit:"
  radios={[ 'apple', 'banana', 'carrot' ]}
/>

Checked

If you want a radio to be checked, set checked to true on that radio item.

<Radios
  name="fav-fruit"
  legend="Pick your favourite fruit:"
  radios={[
    'apple',
    'banana',
    { value: 'carrot', checked: true },
  ]}
/>

Disabled

If you want all radios to be disabled, use the disabled property on Radios. Disabled radios will not send data when submitted, even if they are checked.

<Radios
  name="fav-fruit"
  legend="Pick your favourite fruit:"
  disabled
  radios={[ 'apple', 'banana', 'carrot' ]}
/>

If you want to disable a single radio, add the disabled property to that radio instead.

<Radios
  name="fav-fruit"
  legend="Pick your favourite fruit:"
  radios={[
    'apple',
    'banana',
    { value: 'carrot', disabled: true },
  ]}
/>

Readonly

If you want all radios to be read-only, use the readonly property on Radios. Use this over disabled if you want to send the radio state and value on form submission.

When you do this, make sure the radio you want is checked or nothing will be submitted!

Note

Native radioes don’t have the readonly attribute. To simulate readonly, Radios create a hidden <input> with the same name and value for the checked radio item.

<Radios
  name="fav-fruit"
  legend="Pick your favourite fruit:"
  readonly
  radios={[
    'apple',
    'banana',
    { value: 'carrot', checked: true }
  ]}
/>

Radio UI

Pick your favourite fruit:

Apple

Banana

Carrot

Data sent to server

{
  'fav-fruit': 'carrot'
}

Additional input field

You can add one TextInput to Radios. This is often used for adding an “other” option. To activate this, add the hasInput property to the radio item that should have the input field.

When the radio is checked, the input field will show up.
When unchecked the input field remains hidden.

<Radios
  name="fav-fruit"
  legend="Your choice of fruits:"
  radios={[
    'apple',
    'banana',
    'carrot',
    { value: 'others', hasInput: true },
  ]}
/>

This TextInput will have its name set to the radio’s name + input. Both Radio’s value and TextInput’s value will be sent to the server when the form is submitted.

{
  "fav-fruit": "others",
  "fav-fruit-input": "Pineapple" // assuming Pineapple is in the input
}

Other properties

All other properties for each radio item will be passed into their respective radio component.

Changing Icons

You can change the icon of radio items by setting icon to Radios.

<div class="Radio">
  <div class="Radiomark">
    <input
      class="Field"
      type="radio"
      id="radio"
      name="radiogroup"
      value="value"
    />

    <!-- If readonly and checked -->
    <input type="hidden" {name} {value} />
    <!-- <svg class="{iconClass}" {icon} /> -->
    <!-- <div class="radio"></div> -->
  </div>

  <label class="Label" for="radio"> Label </label>
  <!-- <TextInput name="{name}-input" /> -->
</div>

Bindings and Events

Note

The contents of this section will only work in a .svelte file and not inside an .astro file.

Element binding

You can bind to the <fieldset> element with the ref property.

<script>
  let ref = null
</script>

<Radios ... bind:ref>

If you bind radios, you can also get the <input> element of each radio with the ref property.

<script>
  let radios = [
    { value: 'apple', ref: null }
    { value: 'banana', ref: null }
    { value: 'carrot', ref: null }
  ]
  // radios[0].ref will be the <input> element for the apple radio

</script>

<Radios ... bind:radios>

Checked State Binding

If you need to know which radio is checked, you can bind to the checked property.

<script>
  let checked = false
</script>

<Radio ... bind:checked/>

Radios

Pick your favourite fruit:

Apple

Banana

Carrot

Data

{
  checked: null
}

Events

Only the change event is supported on Radios. You can listen to the event like this:

<script>
  function change(event) {
    console.log(event.target.value)
  }
</script>

<Radios ... on:change={change} />

Note

We only support the change event because Svelte 4 doesn’t have automatic event-forwarding capability. All events will be forwarded automatically when we migrate to Svelte 5.

Please login to view this content

Splendid Labz is free because we love developers and we want to contribute back to the ecosystem.

We only charge for access to the documentation to keep the project going. If you don't wish to pay, feel free to use the content from the features tab, our blogs or our videos as your guide.

Basic Styles

You can import the basic styles for Radios through Splendid Styles.

@use '@splendidlabz/styles';

@import '@splendidlabz/styles/css';

Only necessary styles

If you wish to include only the necessary styles in your project, you can import the following files:

@use '@splendidlabz/styles/Forms/FormBase';
@use '@splendidlabz/styles/Forms/FormControls';

@import '@splendidlabz/styles/css/Forms/FormBase';
@import '@splendidlabz/styles/css/Forms/FormControls';

HTML Output

For Radios

Radios produces the following HTML:

<fieldset class="Fieldset">
  <legend class="Legend">Legend</legend>
  <div class="Radios">
    <!-- Radio 1 -->
    <!-- Radio 2 -->
    <!-- Radio 3 -->
  </div>
</fieldset>

For each radio item

Each radio item has the following output:

<div class="Radio">
  <div class="Radiomark">
    <input
      id="radio"
      class="Field"
      type="radio"
      name="radiogroup"
      value="value"
    />
    <div class="radio"></div>
  </div>
  <label class="Label" for="radio"> Label </label>
</div>

HTML Alterations

Readonly and checked

If readonly and checked are present, each radio will produce a hidden input with the associated value. This allows you to sent the value to the server even when the radio input is disabled.

<div class="Radio">
  <div class="Radiomark">
    <input ... />
    <!-- If readonly and checked -->
    <input type="hidden" name="radiogroup" value="value" />
    <div class="radio"></div>
  </div>
  <label ...> Label </label>
</div>

Has input

If hasInput is present, the radio will produce a TextInput with name set to the radio group’s name plus input.

<div class="Radio">
  <div class="Radiomark">
    <input ... />
    <div class="radio"></div>
  </div>
  <label ...> Label </label>
  <!-- <TextInput with name="radiogroup-input" goes here -->
</div>

Icon

If icon is passed to Radios or each radio item, .radio will be changed to the SVG you specified.

<div class="Radio">
  <div class="Radiomark">
    <input ... />
    <svg ...></svg>
  </div>
  <label ...> Label </label>
</div>

Properties and classes

For Radios

The following classes are used by Radios:

Class	Description
`Fieldset`	Styles the `<fieldset>`
`Legend`	Styles the legend
`Radios`	Styles the radio container

The following properties can be used to add classes to Radios.

Property	Description
`class`	Add classes to `Radios`
`legendClass`	Add classes to the legend
`RadiosClass`	Add classes to the radios container

For each radio item

The following classes are used by each radio element:

Class	Description
`Radio`	Styles the Radio container
`Radiomark`	Styles the container that contains the radio
`Field`	Styles the `<input>`
`Label`	Styles the label

The following properties can be used to add classes each radio element:

Property	Description
`class`	Add classes to `Radio`
`labelClass`	Add classes to the label
`fieldClass`	Add classes to the `<input>`
`iconClass`	Add classes to your custom SVG Icon

States

The following classes will be added to the Radio element upon the satisfaction of the described conditions:

Class	Description
`checked`	Applied when the radio is checked
`disabled`	Applied when the radio is disabled
`readonly`	Applied when the radio is readonly

CSS Variables

Each Radio uses the following CSS variables to define its appearance:

Variable	Default	Description
`--border-width`	`1px`	Border width of the `<input>`
`--border-style`	`solid`	Border style of the `<input>`
`--border-color`	`black`	Border color of the `<input>`
`--bg-color`	`transparent`	Background color of the `<input>`
`--gap`	`0.5em`	Gap between the radio and the label
`--size`	`1em`	Size of the `<input>`

Please login to view this content

Splendid Labz is free because we love developers and we want to contribute back to the ecosystem.

We only charge for access to the documentation to keep the project going. If you don't wish to pay, feel free to use the content from the features tab, our blogs or our videos as your guide.

Properties

For Radios

You can use these properties to customize Radios’ functionality.

Property	Type	Description
`legend`	`string`	Legend for the group of radios
`name`	`string`	Name of the radio group. (required).
`radios`	`array`	Radio items. See `radios`. (required).
`disabled`	`boolean`	Adds the `disabled` state to all radios when present.
`readonly`	`boolean`	Adds the `readonly` state to all radios when present.
`ref`	`object`	Reference for the `<fieldset>` element

For each radio item

Use these properties to customize each radio item.

Property	Type	Description
`id`	`string`	Id of the input. A random value will be created if `undefined`
`value`	`string`	Input value. (required)
`label`	`string`	The label
`checked`	`boolean`	Adds the `checked` state when present.
`disabled`	`boolean`	Adds the `disabled` state when present.
`readonly`	`boolean`	Adds the `readonly` state when present.
`ref`	`object`	Reference for the `<input>` element
`hasInput`	`boolean`	Creates an additional `TextInput` alongside the checkbox if `true`. See additional input field for usage instructions.

Types

Radios

List of radio items. Each item can be a string or an object.

Type: string[] | object[]

If a list of strings are passed as radios, each string will be used as the value of the radio item.

<Radios
  name="fav-fruit"
  legend="Pick your favourite fruit:"
  radios={[ 'apple', 'banana', 'carrot']}
/>

<Radios
  name="fav-fruit"
  legend="Pick your favourite fruit:"
  radios={[
    { value: 'apple' },
    { value: 'banana' },
    { value: 'carrot' },
  ]}
/>

Properties that can be passed into each radio items are indicated on the for each radio item table above.

Please login to view this content

Splendid Labz is free because we love developers and we want to contribute back to the ecosystem.

We only charge for access to the documentation to keep the project going. If you don't wish to pay, feel free to use the content from the features tab, our blogs or our videos as your guide.