RadioGroup

Props

export let id = generateId();
// If SiteVision default functions for getting and setting config is used name must be set
export let name;
// Array of options, ['value1', 'value2'] or [{ label: 'Value 1', value: 'value1' }, { label: 'Value 2', value: 'value2' }].
export let options;
// Fieldset legend.
export let legend;
// If legend should be hidden visually
export let legendVisuallyHidden = false;
// If field is disabled, can be boolean to disable all options, or an array of disabled option values; ['value1'].
export let disabled = false;
// Show and hide compoment without re-rendering.
export let show = true;
// Used if bound to value.
export let value = '';

Example

Standard

<script>
  import { Panel, RadioGroup } from '@soleil-se/config-svelte';
</script>

<Panel heading="Inställningar">
  <RadioGroup
    name="radioGroup1"
    legend="Radio group 1"
    options={['Värde 1', 'Värde 2', 'Värde 3']}
    value="Värde 1"
  />
  <RadioGroup
    name="radioGroup2"
    legend="Radio group 2"
    options={[{ label: 'Värde 1', value: 'value1' }, { label: 'Värde 2', value: 'value2' }, { label: 'Värde 3', value: 'value3' }]}
    value="value1"
  />
</Panel>

Advanced

<script>
  import { Panel, RadioGroup } from '@soleil-se/config-svelte';
  import { onSave } from '@soleil-se/config-svelte/utils';

  const values = {
    radioGroup: '',
    ...window.CONFIG_VALUES
  };

  const options = ['Värde 1', 'Värde 2', 'Värde 3'];

  onSave(() => values);

</script>

<Panel heading="Inställningar">
  <RadioGroup bind:value={values.radioGroup} legend="Radio group" {options} />
</Panel>

Slots

Default

Default slot after radio group.

<RadioGroup name="radioGroup" legend="Radio group" {options} />
  <p class="help-block">Some helpful text.</p>
</RadioGroup>

Legend

Slot for content in the legend element.

<RadioGroup name="radioGroup" {options} />
  <svelte:fragment slot="legend">
    Custom <em>legend</em>
  </svelte:fragment>
</RadioGroup>

Option (since 1.26.0)

Slot for content in each radio buttons label. The provided option parameter contains the full option object corresponding to the specific radio button as provided in the slots array to the RadioGroup.

<RadioGroup name="radioGroup" {options} />
  <svelte:fragment slot="option" let:option>
    <span>{option.label || option}</span>
    <span>Custom <em>content</em></span>
  </svelte:fragment>
</RadioGroup>

Default value

Use the value attribute to set a default value:

<RadioGroup
  name="radioGroup"
  legend="Radio group"
  options={['Värde 1', 'Värde 2', 'Värde 3']}
  value="Värde 1"
/>