Radio

Sizes

Selected size: md

<script lang="ts">
  let size = 'md'
</script>

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

<div class="c-flex c-gutter-md c-wrap c-items-center">
  <div>
    <CRadio bind:value={size} label="xs" selectedValue="xs" size="xs" />
  </div>
  <div>
    <CRadio bind:value={size} label="sm" selectedValue="sm" size="sm" />
  </div>
  <div>
    <CRadio bind:value={size} label="md (default)" selectedValue="md" />
  </div>
  <div>
    <CRadio bind:value={size} label="lg" selectedValue="lg" size="lg" />
  </div>
  <div>
    <CRadio bind:value={size} label="xl" selectedValue="xl" size="xl" />
  </div>
</div>
<script lang="ts">
  let size = 'md'
</script>

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

<div class="c-flex c-gutter-md c-wrap c-items-center">
  <div>
    <CRadio bind:value={size} label="xs" selectedValue="xs" size="xs" />
  </div>
  <div>
    <CRadio bind:value={size} label="sm" selectedValue="sm" size="sm" />
  </div>
  <div>
    <CRadio bind:value={size} label="md (default)" selectedValue="md" />
  </div>
  <div>
    <CRadio bind:value={size} label="lg" selectedValue="lg" size="lg" />
  </div>
  <div>
    <CRadio bind:value={size} label="xl" selectedValue="xl" size="xl" />
  </div>
</div>
svelte
Click fold/expand code

Disabled

<script lang="ts">
  let value = false
</script>

<CRadio bind:value label="Disabled" disabled />
<script lang="ts">
  let value = false
</script>

<CRadio bind:value label="Disabled" disabled />
svelte
Click fold/expand code

CRadio Props

  • value
    boolean | string | number
    default: false

    The radio selected status. It is recommended to use bind:value.

  • selectedValue
    boolean | string | number
    default: true

    The selected value.

  • label
    string
    default:

    The label text.

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

    The size of radio. Notice that the default value is 'md' instead of undefined

  • disabled
    boolean
    default: false

    Determine whether the radio is disabled or not.

CRadio Events

  • change

CRadio Slots

No data

CRadio Exports

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