Base

  • Colors
  • Icons
  • Logos
  • Shadows and Elevations
  • Spacing
  • Typography

Components

  • Accordion
  • Avatars
  • Badges
  • Buttons
  • Cards
  • Character Counter
  • Device Type Icons
  • Draggables
  • Dropdowns
  • Droppables
  • Expandable image
  • Filters
  • Gallery card
  • Icon Button
  • Indicators
  • Lightbox image
  • Lists
  • Loading
  • Messages
  • Pictogram
  • Poster Play
  • Progress bar
  • QR Code
  • Rating stars
  • Row Selector
  • Segmented Controls
  • Sentiment
  • Split View
  • Tables
  • Tags
  • Tester vitals
  • Toggle button
  • Typeahead

Form

  • Card Select
  • Checkbox
  • Combobox
  • Form Rule
  • Hint
  • Input
  • Input Title
  • Label
  • Multi-select List
  • Search
  • Select
  • Single-select List
  • Sliders
  • Switch
  • Text Area

Layout

  • Containers
  • Layers
  • Layout
  • Split Layout
  • Wrappers

Navigation

  • Context Switcher
  • Nav bar
  • Navigation
  • Pagination
  • Sidebar Navigation
  • Step Navigation
  • Tabs

Overlay

  • Banners
  • Bulk Selector
  • Modals
  • Popovers
  • Toast
  • Tooltips
  • User Notifications

Patterns

  • Full Page Message
  • Question card & Group Questions Container

Visualizations

  • Data Colors

Checkbox

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

Checkbox




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



Expand Copy
<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.

Block style

>
Expand Copy
<tk-checkbox
block
label='Salamander blood'

> </tk-checkbox>
> 

Description

The checkbox renders with a block style.

HTML label

Salamander blood
Expand Copy
<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

PropertyRequired?DefaultDescription
alignmentnocenterThe vertical alignment of the label
blocknofalse[BETA] Render with a block style
errorIdno[BETA] The HTML id of an error element (re: aria)
labelnoThe label describing the checkbox
valuenoThe value for the checkbox
checkednofalseDisplays whether the checkbox is ticked
disablednofalseDisables the checkbox so it cannot be clicked
sizenomediumChanges the size of the checkbox and label

Events

NameDescription
checkA string of the currently selected choice whenever the checkbox is checked or unchecked.