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} />
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
Last update at: 2024/07/08 10:39:42