Switch

O Switch, também chamado muitas vezes de Toggle, é um componente do tipo checkbox. Ele permite apenas a seleção boolean, podendo carregar um valor específico. Contudo, sua utilização geralmente é um pouco diferente de um checkbox comum. Esse componente não é normalmente usado em formulários e costuma ser utilizado para ativação/desativação de funcionalidades ou propriedades de um perfil.

Playground

Propriedades

Nome (* = obrigatório)

Tipo

Valores

Descrição

label

string

O texto explicativo do switch. Ele não é obrigatório, mas sem ele, deve-se fornecer um aria-label ou aria-labelledby para permitir a acessibilidade de recursos especiais não-visuais.

checked

boolean

  • true

  • false (default)

Se fornecido (como true ou false), o componente será tratado de forma controlada (controlled) e o seu estado deverá sempre ser fornecido através dessa propriedade. Se não for fornecido, o componente será não-controlado (uncontrolled).

Fornecer essa prop também causa com que a propriedade defaultChecked seja ignorada.

defaultChecked

boolean

  • true

  • false (default)

Quando true, o componente será tratado de forma não-controlada (uncontrolled) e o seu estado será gerenciado pelo próprio componente. Essa propriedade é ignorada caso a propriedade checked seja utilizada.

disabled

boolean

  • true

  • false (default)

Quando true, o switch fica inacessível e imutável. Essa propriedade pode ser usada em par com as propriedades checked e defaultChecked para que o switch fique sempre marcado.

name

string

  • -

Se fornecido, será passado ao input para permitir o funcionamento com formulários.

value

any

  • -

Se fornecido, será passado ao input para permitir o funcionamento com formulários e permitir a captura do valor através do seu target.

id

string

  • -

Quando não é fornecido, o componente funciona normalmente. Se fornecido, os subcomponentes recebem propriedades ARIA auxiliares como aria-label, aria-labelledby e aria-describedby.

customProps

{ input?: ComponentPropsWithRef<'input'>; }

  • -

Adiciona propriedades específicas para elementos filhos.

Métodos

Nome (* = obrigatório)

Tipo

Descrição

onChange

function

Função chamada quando o componente é ativado.

event é o objeto de evento de change.