CRadio

O input radio é um controle de opções, é uma única escolha entre as opções possíveis.

Exemplos

API

Exemplos do Radio

Simples

Opção A

<c-radio label="Opção A" value="A" />

<c-radio
  label="Opção A"
  value="A"
/>

Usando um grupo (Radio Group)

Opção A

Opção B

Opção C

<template> <c-radio-group v-model="option"> <c-radio label="Opção A" value="a" /> <c-radio label="Opção B" value="b" /> <c-radio label="Opção C" value="c" /> </c-radio-group> </template> <script> export default { data() { return { option: 'a' } } } </script>

<template>
  <c-radio-group v-model="option">
    <c-radio
      label="Opção A"
      value="a"
    />
    <c-radio
      label="Opção B"
      value="b"
    />
    <c-radio
      label="Opção C"
      value="c"
    />
  </c-radio-group>
</template>

<script>
export default {
  data() {
    return {
      option: 'a'
    }
  }
}
</script>

Passando um nome ou o estado de disabled para todos os radios dentro do grupo

Opção A

Opção B

Opção C

<c-radio-group name="grupo-option" disabled> <c-radio label="Opção A" value="a" /> <c-radio label="Opção B" value="b" /> <c-radio label="Opção C" value="c" /> </c-radio-group>

<c-radio-group name="grupo-option" disabled>
  <c-radio
    label="Opção A"
    value="a"
  />
  <c-radio
    label="Opção B"
    value="b"
  />
  <c-radio
    label="Opção C"
    value="c"
  />
</c-radio-group>

Radio Group API

Para utilizar o CRadioGroup é preciso primeiro importar o componente:

import { CRadioGroup } from '@estrategiahq/coruja-web-ui';

Props

As props disponíveis para configurar o componente são:

Nome	Tipo	Default	Descrição
name	string	null	Permite passar um nome único para todos os radios filhos.
disabled	boolean	false	Permite habilitar/desabilitar todos os Radios.
value	boolean, null	false	Define o valor para o grupo.

Slots

Podem conter qualquer tipo de código template, incluindo HTML ou outro componente. Temos defínido os seguintes slots:

Nome	Descrição
default	Aceita N componentes CRadio como filhos em formato de lista

Events

Usado para definir alguma ação.

Nome	Tipo	Descrição
@change	function	Emitido quando o valor do componente é alterado.

Radio API

Para utilizar o CRadio é preciso primeiro importar o componente.

import { CRadio } from '@estrategiahq/coruja-web-ui';

Props

As props disponíveis para configurar o componente são:

Nome	Tipo	Default	Descrição
id	string	null	Permite passar um id único para o input.
name	string	null	Permite passar um nome único para o input.
value	boolean, null	false	Define o valor para o input.
disabled	boolean	false	Permite habilitar/desabilitar o input, pode utilizar as opções true ou false.
label	string	vazio	Permite passar um label para o checkbox.

Slots

Podem conter qualquer tipo de código template, incluindo HTML ou outro componente. Temos defínido os seguintes slots:

Nome	Descrição
default	Se não definir um label na props do componente, você pode definir um label, com um slot chamado default.

Events

Usado para definir alguma ação.

Nome	Tipo	Descrição
@click	function	Emitido quando o componente é clicado com o seu novo valor
@focus	function	Emitido quando o componente é focado.
@blur	function	Emitido quando o componente perde o foco.