Switch
Switches são componentes utilizados para ativar ou desativar configurações ou opções específicas.
Quando usar
- A configuração controlada pelo Switch deve aplicar mudanças automaticamente.
- Ao usar labels. Quando usados em conjunto, devem descrever dois estados, dependentes do estado do Switch.
Quando não usar
- Em formulários que possuem botão de submit.
- Utilizar Switches para controlar ações que dependam de requisições sem indicar o tempo de espera ao usuário.
Uso
js
<CdsSwitch
v-model="isSelected"
/>Preview
Props
Nome | Tipo | Default | Opções | Descrição |
|---|---|---|---|---|
label | string | '' | -- | Especifica a label do Switch. |
small | boolean | false | -- | Torna o Switch pequeno. |
variant | string | 'green' | green teal blue indigo violet pink red orange amber dark | A variante de cor. São 10 variantes: |
large | boolean | false | -- | Torna o Switch grande. |
disabled | boolean | false | -- | Controla a disponibilidade do Switch |
focused | boolean | false | -- | Controla o focus do Switch |
tooltip | string | null | -- | Define exibição e texto do tooltip do input |
tooltipIcon | string | 'info-outline' | -- | Especifica ícone do tooltip do TextInput. |
supportingText | string|array | '' | -- | Especifica mensagem de auxílio. |