No Results Found
A checkbox is used to give a user a way to select a value.
<tk-checkbox
label='Salamander blood'>
</tk-checkbox>
<hr>
<tk-checkbox
alignment="center"
label='A multi-line label. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.'
>
</tk-checkbox>
<hr>
<tk-checkbox
alignment="top"
label='A top-aligned multi-line label. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.'
>
</tk-checkbox>
<hr>
<tk-checkbox
label='Salamander blood'
disabled>
</tk-checkbox>
The checkbox renders checkbox with a optional label.
<tk-checkbox
label="Salamander blood"
size="small">
</tk-checkbox>
<hr>
<tk-checkbox
label="Salamander blood"
size="medium">
</tk-checkbox>
<hr>
<tk-checkbox
label="Salamander blood"
size="large">
</tk-checkbox>
The default size is medium. Small and large options are available.
<tk-checkbox
block
label='Salamander blood'
>
</tk-checkbox>
The checkbox renders with a block style.
<tk-checkbox size="medium">
Salamander <b>blood</b>
</tk-checkbox>
If you need a more dynamic label (e.g. to make use of <b>
, <i>
, <u>
, etc) -
simply put the text inside of the component.
Please note that label
prop will always take precedence
over component children when deciding which checkbox label should be rendered.
This component will receive a different set of styles based on the active --tk-theme
CSS property.
To receive theme styling: make sure to set the desired value for this property inside of the :root
selector.
These styles are not ready for production, so they cannot be used in Orders
Property | Required? | Default | Description |
---|---|---|---|
alignment |
no | center | The vertical alignment of the label |
block |
no | false | [BETA] Render with a block style |
errorId |
no | [BETA] The HTML id of an error element (re: aria) | |
label |
no | The label describing the checkbox | |
value |
no | The value for the checkbox | |
checked |
no | false | Displays whether the checkbox is ticked |
disabled |
no | false | Disables the checkbox so it cannot be clicked |
size |
no | medium | Changes the size of the checkbox and label |
Name | Description |
---|---|
check |
A string of the currently selected choice whenever the checkbox is checked or unchecked. |