Checkbox
Checkboxes são componentes de formulário que permitem seleções binárias e múltiplas.
Quando usar:
- Quando precisar de um componente de formulário para seleções binárias.
Quando não usar:
- Não use checkboxes sem labels.
- Evite labels negativas, elas são mais difíceis de interpretar.
- Quando for preciso que o efeito da interação com o Checkbox seja imediato. Checkboxes devem ser usados sempre em conjunto com um botão de submissão. Para contornar casos como esse, use Switches.
- Evite utilizar checkboxes alinhadas horizontalmente.
Uso
js
<CdsCheckbox
v-model="value"
label="checkbox"
variant="green"
:indeterminate="false"
:disabled="false"
:prominent="false"
/>Preview
Props
Nome | Tipo | Default | Opções | Descrição |
|---|---|---|---|---|
* modelValue (required) | boolean | false | -- | A prop usada como v-model para monitorar a seleção do Checkbox |
label | string | 'checkbox content' | -- | Exibe a etiqueta do checkbox |
variant | string | 'green' | green teal blue indigo violet pink red orange amber dark | A variante de cor. São 10 variantes: |
indeterminate | boolean | false | -- | Prop usada para indicar visualmente se o checkbox está no estado indeterminado. Two-way binding ativo com o `v-model:indeterminate` |
prominent | boolean | false | -- | Destaca visualmente a label |
disabled | boolean | false | -- | Controla o status checkbox |
Eventos
Nome | Descrição |
|---|---|
@update:modelValue | Evento utilizado para implementar o v-model. |
@update:indeterminate | Evento utilizado para implementar o modelValue com a prop "Indeterminate". |