Checkbox

A checkbox is used to give a user a way to select a value.

Checkbox




<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>

Description

The checkbox renders checkbox with a optional label.

Sizes



<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>

Description

The default size is medium. Small and large options are available.

HTML label

Salamander blood
<tk-checkbox size="medium">
  Salamander <b>blood</b>
</tk-checkbox>

Description

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.

Props

Property Required? Default Description
alignment no center The vertical alignment of the label
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

Events

Name Description
check A string of the currently selected choice whenever tge checkbox is checked or unchecked.