Botão de opção

Um grupo de rádio construído sobre React Aria - navegação com teclas de seta, forma semântica e associação de etiquetas de graça. O ponto selecionado usa o mesmo gradiente azul/500 → azul/600 e realce inset como a família da caixa de seleção, em tamanhos md (16px) e sm (14px).

Instalação

Você pode adicionar este componente de rádio usando o nosso CLI ou manualmente:

Modo escuro pronto - este componente segue tokens semânticos BoardUI automaticamente. Configurar a mudança de tema.

O CLI copia a fonte do componente (com suas dependências internas) em seu projeto e instala quaisquer pacotes npm necessários.

npx boardui@latest add radio

Usando um pacote de UI compartilhado ou aliases de importação personalizados? Configure seus caminhos de instalação antes de executar o CLI. Exemplos de copy-paste usam as importações padrão.

Tamanhos

Dois tamanhos através do tamanho aderente - md (16px, o padrão) e sm (14px, a Figma radio_selected_sm glifo usado dentro de menus), emparelhado com rótulos Body 2.

md - 16px
sm - 14px
<Radio size="md" value="a">Medium</Radio> {/* 16px (default) */}<Radio size="sm" value="b">Small</Radio> {/* 14px */}

Cartão de rádio

Cartão selecionável com título e descrição opcional - todo o cartão seleciona o rádio, correspondente à superfície do Cartão de Verificação. RadioGroup para uma única seleção e navegação com teclas de seta. É um item de registro separado: npx boardui add radio-card.

import { RadioCard } from "@/components/base/radio/radio-card";import { RadioGroup } from "@/components/base/radio/radio"; <RadioGroup aria-label="Plan" defaultValue="pro"> <RadioCard value="starter" title="Starter" description="For side projects and experiments." /> <RadioCard value="pro" title="Pro" description="For growing teams that need more." /> <RadioCard value="enterprise" title="Enterprise" description="Custom limits and support." isDisabled /></RadioGroup>