AppToggle

Átomos

Abrir no Storybook

Interruptor nativo para ativar ou desativar uma preferência imediatamente.

Quando usar: uma configuração binária tem efeito imediato e os estados ligado e desligado são claros.

Quando não usar: a pessoa precisa confirmar a escolha antes de aplicá-la ou escolher entre várias opções.

O ref e todas as props HTML são repassados ao <input> nativo.

Importar

import { AppToggle } from '@handsondigital/idplugger-ui'

CSS

Para carregar só o CSS deste componente (além do tokens.css), importe o arquivo dele; as dependências vêm por @import:

@import '@handsondigital/idplugger-ui/css/AppToggle.css';

Com Tailwind 4 e camadas, use a variante em @layer idplugger-ui:

@import '@handsondigital/idplugger-ui/css/layer/AppToggle.css';

Exemplos

Default

Exemplo: AppToggle, Default

const Default = () => <AppToggle label="Receber novidades" />;

Sizes

Exemplo: AppToggle, Sizes

const Sizes = () => (
  <div style={{ display: 'grid', gap: 16 }}>
    <AppToggle size="sm" label="Pequeno" />
    <AppToggle size="md" label="Médio" defaultChecked />
  </div>
);

With Hint

Exemplo: AppToggle, With Hint

const WithHint = () => <AppToggle
    label="Receber novidades"
    hint="Você pode alterar esta preferência depois." />;

With Error

Exemplo: AppToggle, With Error

const WithError = () => <AppToggle
    label="Receber novidades"
    error="Confirme o recebimento de novidades." />;

Disabled

Exemplo: AppToggle, Disabled

const Disabled = () => <AppToggle label="Receber novidades" disabled defaultChecked />;

Props

Prop	Tipo	Padrão	Descrição
error	string	—	Mensagem de erro que marca o controle como inválido.
hint	string	—	Texto de apoio abaixo do rótulo. Some enquanto houver error.
label	ReactNode	—	Rótulo visível. Informe label ou aria-label para dar nome acessível ao controle.
size	"sm" | "md"	md	Tamanho do trilho. Padrão: md.