Checkbox
The e-checkbox component is a user interface element that allows users to toggle between two states, typically representing selection or deselection. It consists of a small box that can be checked (selected) or unchecked (deselected). The Checkbox component can be used to represent both single and multiple selections.
Props
Explore the available props for the form component
| Property | Description | Type | Default |
|---|---|---|---|
| retain-color | allows the input to maintain the color regardless of the state it is in. | boolean | false |
| disabled | Modify the style and change the input state to disabled | boolean | false |
| readonly | change the input state to disabled | boolean | false |
| label-inline | set the css rule white-space: nowrap; to the label | boolean | false |
| detail | displays an informational message below the component | string | '' |
| outlined | applies an outlined style | boolean | false |
| label | label associated with the input field | boolean | false |
| model-value | The v-model value of the component. | boolean | false |
| color | Applies specified color to the component - supports only utility colors (for example primary or secondary) | string | primary |
| detail-errors | shows an error message below the component and changes the state | Array | [] |
| label-min-width | This sets a minimum width in px for the label | string | |
| cols | Sets the default number of columns the component extends. Available options are: {1...24}. | string | number | |
| sm | Changes the number of columns on small and greater breakpoints. | string | number | |
| md | Changes the number of columns on medium and greater breakpoints. | string | number | |
| lg | Changes the number of columns on large and greater breakpoints. | string | number | |
| rules | Accepts a array of types function that pass an input value as an argument and must return either true | false or a string containing an error message. This also change the input state. | Array<(param: any)=> string | true> | [] |
| hide-overlay | hides the color layer that covers the component | boolean | false |
| true-value | The value of the component when selected. This prop is required when using the component with v-model. | boolean | true |
| false-value | The value of the component when not selected. This prop is required when using the component with v-model. | boolean | true |