# ez-check ## Properties | Property | Attribute | Description | Type | Default | | ------------------------ | ------------------------- | --------------------------------------------------------------------------------------------------- | --------------------------------------- | ------------------- | | `alternativePlaceholder` | `alternative-placeholder` | Texto alternativo a ser apresentado como título do campo. | `string` | `undefined` | | `compact` | `compact` | Define o modo compacto com espaçamento menor entre label e o input | `boolean` | `false` | | `enabled` | `enabled` | Se false o usuário não pode interagir com o campo. | `boolean` | `true` | | `indeterminate` | `indeterminate` | Se true ativa o estado indeterminado, nem marcado nem desmarcado (não disponível em modo `switch`). | `boolean` | `undefined` | | `label` | `label` | Texto a ser apresentado como título do campo. | `string` | `undefined` | | `mode` | `mode` | Define o modo de visualização do ez-check. | `CheckMode.REGULAR \| CheckMode.SWITCH` | `CheckMode.REGULAR` | | `value` | `value` | Define o valor do campo. | `boolean` | `undefined` | ## Events | Event | Description | Type | | ---------- | ------------------------------------------------------ | ------------------ | | `ezChange` | Emitido quando acontece a alteração de valor do campo. | `CustomEvent` | ## Methods ### `getMode() => Promise` Obtém o modo escolhido. #### Returns Type: `Promise` --- ### `setFocus() => Promise` Aplica o foco no campo. #### Returns Type: `Promise` ## Dependencies ### Used by - [ez-form-view](../ez-form-view) - [ez-link-builder](../ez-rich-text/ez-link-builder) - [ez-list](../ez-list) - [ez-multi-selection-list](../ez-multi-selection-list) ### Graph ```mermaid graph TD; ez-form-view --> ez-check ez-link-builder --> ez-check ez-list --> ez-check ez-multi-selection-list --> ez-check style ez-check fill:#f9f,stroke:#333,stroke-width:4px ``` ---------------------------------------------- ## CSS Variables | Variable | Description | |-|-| | --ez-check--box--width | Define a largura do box do checkbox. | | --ez-check--box--height | Define a altura do box do checkbox. | | --ez-check--width | Define a largura do input do checkbox. | | --ez-check--height | Define a altura do input do checkbox | | --ez-check--border-radius | Define o raio da borda do input do checkbox. | | --ez-check--checked--background-color | Define a cor de fundo do input do checkbox quando marcado. | | --ez-check--focus--background-color | Define a cor de fundo do input do checkbox quando focado. | | --ez-check--hover--background-color | Define a cor de fundo do input do checkbox quando o cursor está sobre ele. | | --ez-check--checked--disabled--background-color | Define a cor de fundo do input do checkbox quando marcado e desabilitado. | | --ez-check--border | Define o estilo da borda do input do checkbox. | | --ez-check--disabled--border | Define o estilo da borda do input do checkbox quando desabilitado. | | --ez-check--checked--border | Define o estilo da borda do input do checkbox quando marcado. | | --ez-check--checked--hover--background-color | Define a cor de fundo do input do checkbox quando ativo e com o cursor sobre ele. | | --ez-check--checked--focus--background-color | Define a cor de fundo do input do checkbox quando ativo e focado. | | --ez-check--check--image | Contém o ícone do input marcado. | | --ez-check--indeterminate--image | Ícone usado para o estado "indeterminado" do componente. | | --ez-check--check--background-color | Define a cor de fundo do slot do ícone quando marcado. | | --ez-check--check--disabled--background-color | Define a cor de fundo do slot do ícone quando marcado e desabilitado. | | --ez-switch--slider--width | Define a largura do slider do checkbox. | | --ez-switch--slider--height | Define a altura do slider do checkbox. | | --ez-switch--pin--width | Define a largura do pino do slider do checkbox. | | --ez-switch--pin--height | Define a altura do pino do slider do checkbox. | | --ez-switch--focus--width | Define a largura do slider quando focado. | | --ez-switch--focus--height | Define a altura do slider quando focado. | | --ez-switch--background-color | Define a cor de fundo do checkbox no modo switch. | | --ez-switch--disabled--background-color | Define a cor de fundo do checkbox desabilitado no modo switch. | | --ez-switch--disabled--checked--background-color | Define a cor de fundo do checkbox marcado no modo switch. | | --ez-switch--checked--background-color | Define a cor de fundo do checkbox marcado no modo switch. | | --ez-switch--pin--background-color | Define a cor de fundo do pino do slider. | | --ez-switch--pin--disabled--background-color | Define a cor de fundo do pino do slider quando desabilitado. | | --ez-switch--pin--checked--background-color | Define a cor de fundo do pino do slider quando marcado. | | --ez-switch--pin--checked--disabled--background-color | Define a cor de fundo do pino do slider quando marcado e desabilitado1. | | --ez-switch--pin--focus--background-color | Define a cor de fundo do pino do slider quando focado. | | --ez-switch--pin--checked--focus--background-color | Define a cor de fundo do pino do slider quando marcado e focado. | | --ez-switch--pin--border-color | Define a cor da borda do pino do slider. | | --ez-switch--pin--disabled--border-color | Define a cor da borda do pino do slider quando desabilitado. | | --ez-check--label--font-size | Define o tamanho da fonte do label. | | --ez-check--label--font-family | Define a família da fonte do label. | | --ez-check--label--color | Define a cor da fonte do label. | | --ez-check--label--disabled--color | Define a cor da fonte do label quando desabilitado. |