Checkbox

checkbox component

Introduction

The checkbox component is used to toggle one or multiple options from a set.

View in Groundhog

Styleguide

font-familiy: Bernina Sans Regular
font-size: 14px
height: 20px
border-width: 2px //inside
border-color: $turquoise-600

Checkbox margin and padding

x: 8px
icon: centered

Non-selected checkbox

Non-selected checkbox on dark

Checkbox on light background

Default

Checkbox default

border: 2px solid $turquoise-600
background-color: transparent

Hover

Checkbox hover

border: 2px solid $turquoise-700
background-color: transparent

Active

Checkbox active

border: 2px solid $turquoise-800
background-color: transparent

Disabled

Checkbox disabled

border: 2px solid $gray-300
background-color: transparent

Checkbox on dark background

Default

Checkbox default on dark bg

border: 2px solid #fff
background-color: transparent

Hover

Checkbox hover on dark bg

border: 2px solid #fff
background-color: rgba(255, 255, 255, 0.2)

Active

Checkbox active on dark bg

border: 2px solid #fff
background-color: rgba(255, 255, 255, 0.3)

Disabled

Checkbox disabled on dark bg

border: 2px solid $gray-500
background-color: transparent

Animation

The checkbox component is not animated.

Multiple checkboxes

Checkboxes underneath each other

x: 20px