Radio Group

Usage

Selected fruit: 1

<script lang="ts">
  let fruit = 1

  const options = [
    { label: 'Apple', value: 1 },
    { label: 'Banana', value: 2 },
    { label: 'Orange', value: 3 },
    { label: 'Peach', value: 4 },
  ]
</script>

<p>
  <b> Selected fruit: </b>
  {fruit}
</p>

<CRadioGroup bind:value={fruit} {options} />
<script lang="ts">
  let fruit = 1

  const options = [
    { label: 'Apple', value: 1 },
    { label: 'Banana', value: 2 },
    { label: 'Orange', value: 3 },
    { label: 'Peach', value: 4 },
  ]
</script>

<p>
  <b> Selected fruit: </b>
  {fruit}
</p>

<CRadioGroup bind:value={fruit} {options} />
svelte
Click fold/expand code

CRadioGroup Props

  • value
    string | number
    default:

    Current value. It is recommended to use bind:value.

  • options
    Array<{ label: string; value: string | number }>
    default: undefined

    The options array.

  • size
    'xs' | 'sm' | 'md' | 'lg' | 'xl'
    default: undefined

    The size of all radios in this group.

  • gutterSize
    'xs' | 'sm' | 'md' | 'lg' | 'xl'
    default: undefined

    The gutter size between each radio.

  • validateOnChange
    boolean
    default: true

    If this group is in a Form context. Set this prop to true will validate current field when selection change.

CRadioGroup Events

No data

CRadioGroup Slots

No data

CRadioGroup Exports

No data
Suggest changes to this page
Last update at: 2023/08/13 04:37:06