Radio Button

Tipo: Core

DesignersFigma Design System 2.0
Devs · HTML/CSSmds-styles Storybook com classes e exemplos
Devs · Angularmds-angular Storybook com inputs e outputs

Definição Funcional

O Radio Button permite que o usuário selecione apenas uma opção de um conjunto de escolhas mutuamente exclusivas. Ele é ideal para exibir todas as alternativas disponíveis de forma clara, permitindo a comparação imediata antes da seleção.

Diretrizes de Comportamento

Exclusividade: Selecionar uma nova opção desmarca automaticamente a anterior.
Seleção Padrão: Sempre apresente um dos botões pré-selecionado por padrão para evitar estados inválidos ou indecisão do usuário.
Agrupamento: As opções devem estar logicamente relacionadas sob um título de grupo claro.
Vá Direto ao Ponto: Os rótulos devem ser curtos e positivos. Use Caixa de Sentença.
Listas Curtas: Utilize Radio Buttons para conjuntos de 2 a 5 opções. Se houver mais, considere um Dropdown para reduzir a carga visual.
Interatividade: O clique deve ser permitido tanto no círculo quanto no texto do rótulo para facilitar o uso em dispositivos móveis ou tablets de armazém.

Para desenvolvedores

Tudo abaixo é lido do código (stories, SCSS e componentes Angular) a cada npm run docs:sync — se algo estiver diferente do que você vê no projeto, o código é quem manda.

HTML/CSS (mds-styles)

Exemplo

Story Default do Storybook:

<div class="mds-radio mds-radio--single">
      <label class="mds-radio__wrap">
        <input type="radio" name="radio-group" class="mds-radio__input"  >
        <div class="mds-radio__field">
          <span class="mds-radio__field__check"></span>
        </div>
        <div class="mds-radio__label">
          Radio Label
        </div>
      </label>
    </div>

Variações e opções

Opções do painel de controles do Storybook — escolha um valor lá para ver o resultado ao vivo. As classes CSS correspondentes estão na lista abaixo.

Opção	Valores	Padrão no exemplo
`name`	—	`radio-group`
`variant`	`default` `primary` `success` `danger` `info` `warning`	—
`checked`	`true` · `false`	`false`
`disabled`	`true` · `false`	—

Classes CSS

Lidas do SCSS (src/scss) — só aparece aqui o que realmente existe.

Tipo	Classes
Bloco	`.mds-radio`
Elementos	`.mds-radio__field` `.mds-radio__field__check` `.mds-radio__input` `.mds-radio__label` `.mds-radio__wrap`
Modificadores	`.mds-radio--checked` `.mds-radio--option` `.mds-radio--sm` `.mds-radio--xs`

Angular (mds-angular)

Seletor

mds-radio

Uma entrada de rádio permite que as pessoas selecionem apenas uma opción entre várias opções. O rádio é geralmente exibido em um grupo de rádio.

Inputs

Input	Tipo	Padrão	Descrição
`className`	`string`	`''`	Classe CSS customizada adicionada ao host
`additionalClass`	`string`	`''`	Classe adicional
`label`	`string`	`''`	Label do radio
`size`	`MdsSizes`	`'md'`	Tamanhos para o radio do tipo `group`
`btnVariant`	`MdsButtonVariants`	`'control'`	Variante para o radio do tipo `group`
`btnType`	`'vertical' \| null`	`null`	Tipo do botão no caso de `group`
`iconAdditionalClass`	`string \| null`	`null`	Classe aditional para o icone
`mode`	`MdsRadioModes`	`'single'`	Tipo de radio: * `single` - normal * `group` - grupo de seleção (estilo botão) * `option` - Opção de seleção em uma lista, com destaque no selecionado
`icon`	`MdsIconAlias \| undefined`	`undefined`	Icone do para o radio do tipo `group`
`name`	`string`	`'opcao'`	Nome do campo
`required`	`boolean`	`false`	Campo requerido
`formControlDisabled`	`boolean`	`false`	Desabilita todo o formControl * Talvez não precise, adicionado por segurança e garantia
`disabled`	`boolean`	`false`	Desativa somente este campo
`value`	`boolean \| number \| string`	`false`	—

Outputs

Output	Payload	Descrição
`onChange`	`any`	—

Slots

Conteúdo projetado com o atributo data-position:

data-position="after-label"
data-position="after-content"
data-position="content-right"

Visão ao vivo

Radio Button — Figma (Design System 2.0) ↗