# Vue Radio Component

> Create consistent cross-browser and cross-device radios with our Vue radio component.

## Approach

Browser default checkboxes and radios are replaced with the help of `<CFormCheck>`. Checkboxes are for selecting one or several options in a list, while radios are for selecting one option from many.

## Checks

```html
<template>
  <CFormCheck id="flexCheckDefault" label="Default checkbox" />
  <CFormCheck id="flexCheckChecked" label="Checked checkbox" checked />
</template>

<script setup>
import { CFormCheck } from '@coreui/vue'
</script>
```
  
</Example>

## Indeterminate

Checkboxes can utilize the `:indeterminate` pseudo-class when manually set via `indeterminate` property.

```html
<template>
  <CFormCheck id="flexCheckIndeterminate" label="Indeterminate checkbox" indeterminate />
</template>

<script setup>
import { CFormCheck } from '@coreui/vue'
</script>
```
  
</Example>

### Disabled

Add the `disabled` attribute and the associated `<label>`s are automatically styled to match with a lighter color to help indicate the input's state.

```html
<template>
  <CFormCheck label="Disabled checkbox" disabled />
  <CFormCheck label="Disabled checked checkbox" checked disabled />
</template>

<script setup>
import { CFormCheck } from '@coreui/vue'
</script>
```
  
</Example>

## Radios

Add the `disabled` attribute and the associated `<label>`s are automatically styled to match with a lighter color to help indicate the input's state.

```html
<template>
  <CFormCheck type="radio" name="flexRadioDefault" id="flexRadioDefault1" label="Default radio" />
  <CFormCheck
    type="radio"
    name="flexRadioDefault"
    id="flexRadioDefault2"
    label="Checked radio"
    checked
  />
</template>

<script setup>
import { CFormCheck } from '@coreui/vue'
</script>
```
  
</Example>

### Disabled

```html
<template>
  <CFormCheck
    type="radio"
    name="flexRadioDisabled"
    id="flexRadioDisabled"
    label="Disabled radio"
    disabled
  />
  <CFormCheck
    type="radio"
    name="flexRadioDisabled"
    id="flexRadioCheckedDisabled"
    label="Disabled checked radio"
    checked
    disabled
  />
</template>

<script setup>
import { CFormCheck } from '@coreui/vue'
</script>
```
  
</Example>

## Switches

A switch has the markup of a custom checkbox but uses the `switch` boolean properly to render a toggle switch. Switches also support the `disabled` attribute.

```html
<template>
  <CFormSwitch label="Default switch checkbox input" id="formSwitchCheckDefault" />
  <CFormSwitch label="Checked switch checkbox input" id="formSwitchCheckChecked" checked />
  <CFormSwitch label="Disabled switch checkbox input" id="formSwitchCheckDisabled" disabled />
  <CFormSwitch
    label="Disabled checked switch checkbox input"
    id="formSwitchCheckCheckedDisabled"
    checked
    disabled
  />
</template>

<script setup>
import { CFormSwitch } from '@coreui/vue'
</script>
```
  
</Example>

### Sizes

```html
<template>
  <CFormSwitch label="Default switch checkbox input" id="formSwitchCheckDefault" />
  <CFormSwitch size="lg" label="Large switch checkbox input" id="formSwitchCheckDefaultLg" />
  <CFormSwitch size="xl" label="Extra large switch checkbox input" id="formSwitchCheckDefaultXL" />
</template>

<script setup>
import { CFormSwitch } from '@coreui/vue'
</script>
```
  
</Example>

## Default (stacked)

By default, any number of checkboxes and radios that are immediate sibling will be vertically stacked and appropriately spaced.

```html
<template>
  <CFormCheck id="defaultCheck1" label="Default checkbox" />
  <CFormCheck id="defaultCheck2" label="Disabled checkbox" disabled />
</template>

<script setup>
import { CFormCheck } from '@coreui/vue'
</script>
```
  
</Example>

```html
<template>
  <CFormCheck
    type="radio"
    name="exampleRadios"
    id="exampleRadios1"
    value="option1"
    label="Default radio"
    checked
  />
  <CFormCheck
    type="radio"
    name="exampleRadios"
    id="exampleRadios2"
    value="option2"
    label="Second default radio"
  />
  <CFormCheck
    type="radio"
    name="exampleRadios"
    id="exampleRadios3"
    value="option3"
    label="Disabled radio"
    disabled
  />
</template>

<script setup>
import { CFormCheck } from '@coreui/vue'
</script>
```
  
</Example>

## Inline

Group checkboxes or radios on the same horizontal row by adding `inline` boolean property to any `<CFormCheck>`.

```html
<template>
  <CFormCheck inline id="inlineCheckbox1" value="option1" label="1" />
  <CFormCheck inline id="inlineCheckbox2" value="option2" label="2" />
  <CFormCheck inline id="inlineCheckbox3" value="option3" label="3 (disabled)" disabled />
</template>

<script setup>
import { CFormCheck } from '@coreui/vue'
</script>
```
  
</Example>

```html
<template>
  <CFormCheck
    inline
    type="radio"
    name="inlineRadioOptions"
    id="inlineCheckbox1"
    value="option1"
    label="1"
  />
  <CFormCheck
    inline
    type="radio"
    name="inlineRadioOptions"
    id="inlineCheckbox2"
    value="option2"
    label="2"
  />
  <CFormCheck
    inline
    type="radio"
    name="inlineRadioOptions"
    id="inlineCheckbox3"
    value="option3"
    label="3 (disabled)"
    disabled
  />
</template>

<script setup>
import { CFormCheck } from '@coreui/vue'
</script>
```
  
</Example>

## Without labels

Remember to still provide some form of accessible name for assistive technologies (for instance, using `aria-label`).

```html
<template>
  <div>
    <CFormCheck id="checkboxNoLabel" value="" aria-label="..." />
  </div>
  <div>
    <CFormCheck type="radio" name="radioNoLabel" id="radioNoLabel" value="" aria-label="..." />
  </div>
</template>

<script setup>
import { CFormCheck } from '@coreui/vue'
</script>
```
  
</Example>

## Toggle buttons

Create button-like checkboxes and radio buttons by using `button` boolean property on the `<CFormCheck>` component. These toggle buttons can further be grouped in a button group if needed.

### Checkbox toggle buttons

```html
<template>
  <CFormCheck
    :button="{ color: 'primary' }"
    id="btn-check"
    autocomplete="off"
    label="Single toggle"
  />
</template>

<script setup>
import { CFormCheck } from '@coreui/vue'
</script>
```
  
</Example>

```html
<template>
  <CFormCheck
    :button="{ color: 'primary' }"
    id="btn-check-2"
    autocomplete="off"
    label="Checked"
    checked
  />
</template>

<script setup>
import { CFormCheck } from '@coreui/vue'
</script>
```
  
</Example>

```html
<template>
  <CFormCheck
    :button="{ color: 'primary' }"
    id="btn-check-3"
    autocomplete="off"
    label="Disabled"
    disabled
  />
</template>

<script setup>
import { CFormCheck } from '@coreui/vue'
</script>
```
  
</Example>

### Radio toggle buttons

```html
<template>
  <CFormCheck
    :button="{ color: 'secondary' }"
    type="radio"
    name="options"
    id="option1"
    autocomplete="off"
    label="Checked"
    checked
  />
  <CFormCheck
    :button="{ color: 'secondary' }"
    type="radio"
    name="options"
    id="option2"
    autocomplete="off"
    label="Radio"
  />
  <CFormCheck
    :button="{ color: 'secondary' }"
    type="radio"
    name="options"
    id="option3"
    autocomplete="off"
    label="Radio"
    disabled
  />
  <CFormCheck
    :button="{ color: 'secondary' }"
    type="radio"
    name="options"
    id="option4"
    autocomplete="off"
    label="Radio"
  />
</template>

<script setup>
import { CFormCheck } from '@coreui/vue'
</script>
```
  
</Example>

### Outlined styles

Different variants of button, such at the various outlined styles, are supported.

```html
<template>
  <div>
    <CFormCheck
      :button="{ color: 'primary', variant: 'outline' }"
      id="btn-check-outlined"
      autocomplete="off"
      label="Single toggle"
    />
  </div>
  <div>
    <CFormCheck
      :button="{ color: 'secondary', variant: 'outline' }"
      id="btn-check-2-outlined"
      autocomplete="off"
      label="Checked"
      checked
    />
  </div>
  <div>
    <CFormCheck
      :button="{ color: 'success', variant: 'outline' }"
      type="radio"
      name="options-outlined"
      id="success-outlined"
      autocomplete="off"
      label="Radio"
      checked
    />
    <CFormCheck
      :button="{ color: 'danger', variant: 'outline' }"
      type="radio"
      name="options-outlined"
      id="danger-outlined"
      autocomplete="off"
      label="Radio"
    />
  </div>
</template>

<script setup>
import { CFormCheck } from '@coreui/vue'
</script>
```
  
</Example>