Radio button

radiobutton component

Introduction

The radio button component is used to select one option from a set.

View in Groundhog

Styleguide

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

Radiobtn margin and padding

x: 8px
circle: centered

Non-selected radio button

Non-selected radio button on dark

Non-selected radio buttons use the same state styles just without the dot.

Radio button on light background

Normal

Radiobtn normal

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

Hover

Radiobtn hover

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

Active

Radiobtn active

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

Disabled

Radiobtn disabled

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

Radio button on dark background

Normal

Radiobtn normal on dark bg

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

Hover

Radiobtn hover on dark bg

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

Active

Radiobtn active on dark bg

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

Disabled

Radiobtn disabled on dark bg

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

Animation

Radio buttons are not animated.

Multiple radio buttons

Radiobtns underneath each other

x: 20px