Radios | DS CANTA.

Radio Basico

Opcao A Opcao B

<label class="canta-radio">
  <input type="radio" name="grupo" class="canta-radio__input" checked>
  <span class="canta-radio__circle"></span>
  <span class="canta-radio__label">Opcao A</span>
</label>
<label class="canta-radio">
  <input type="radio" name="grupo" class="canta-radio__input">
  <span class="canta-radio__circle"></span>
  <span class="canta-radio__label">Opcao B</span>
</label>

Estados

Selecionado Desabilitado Selecionado + Desabilitado Com erro

<!-- Disabled -->
<label class="canta-radio">
  <input type="radio" class="canta-radio__input" disabled>
  <span class="canta-radio__circle"></span>
  <span class="canta-radio__label">Desabilitado</span>
</label>

<!-- Error -->
<label class="canta-radio canta-radio--error">
  <input type="radio" class="canta-radio__input">
  <span class="canta-radio__circle"></span>
  <span class="canta-radio__label">Com erro</span>
</label>

Tamanhos

Small (20px) Default (24px) Large (28px)

<label class="canta-radio canta-radio--sm">...</label>
<label class="canta-radio">...</label>
<label class="canta-radio canta-radio--lg">...</label>

Radio Group

Plano

Basico Pro Enterprise

Frequencia

Mensal Trimestral Anual

<!-- Vertical (padrao) -->
<div class="canta-radio-group">
  <div class="canta-radio-group__label">Plano</div>
  <label class="canta-radio">
    <input type="radio" name="plano" class="canta-radio__input">
    <span class="canta-radio__circle"></span>
    <span class="canta-radio__label">Basico</span>
  </label>
  <!-- ... -->
</div>

<!-- Horizontal -->
<div class="canta-radio-group canta-radio-group--horizontal">
  <div class="canta-radio-group__label">Frequencia</div>
  <label class="canta-radio">...</label>
  <label class="canta-radio">...</label>
</div>

API

Classe	Descricao
`.canta-radio`	Classe base do radio (label wrapper, obrigatoria)
`.canta-radio__input`	Input hidden real (type="radio")
`.canta-radio__circle`	Circulo visual customizado com dot interno
`.canta-radio__label`	Texto do label
`.canta-radio--error`	Estado de erro (borda e dot vermelhos)
`.canta-radio--sm`	Tamanho pequeno (20px)
`.canta-radio--lg`	Tamanho grande (28px)
`.canta-radio-group`	Container para agrupar radios (vertical)
`.canta-radio-group--horizontal`	Layout horizontal para o grupo
`.canta-radio-group__label`	Titulo do grupo (uppercase, bold)
`checked`	Atributo HTML nativo para selecionar
`disabled`	Atributo HTML nativo para desabilitar