Checkboxes & Radio Button

The Checkboxes & Radio Button allows users to make selections and make choices within your app. The GoodBarber design system offers a consistent and intuitive experience for this component across all platforms. With a variety of styles and options, the Checkboxes & Radio Button component is a versatile tool that can be used in a variety of contexts, from simple forms to more complex interfaces.

Whether you're building a survey, a quiz, or a data entry form, the Checkboxes & Radio Button component is an essential part of your toolkit. With clear, easy-to-use design, it ensures that users can make their selections with confidence, and without confusion.

Anatomy

Checkboxes

Checkboxes height & width

Checkboxes height & width

Radio buttons

Radio buttons height & width

Radio buttons height & width

Font Size

The Font size changes depending on the devices and the choice of the component size.

	Component Size		Text Level		Mobile		Tablet		Web
	Small		Body 1		14		15		16
			Small Body 1		11		12		12
	Medium		Body 1		16		17		19
			Small Body 1		12		13		13
	Large		Body 1		19		21		22
			Small Body 1		13		14		14

Text and component size according the size atom

Text and component size according the size atom

Properties

Shape

Checkboxes Border Radius

Shape on checkboxes

Shape on checkboxes

Plain & Outline options

Border size values by state for all sizes (Small / Medium / Large)

Style option on checkboxes and radio buttons

Style option on checkboxes and radio buttons

Layout

Spacing within a form

Spacings will be the same for all text or component sizes. To see how the components behave within a form, please refer to the Form Layout section

Checkboxes and radio buttons in form

Checkboxes and radio buttons in form

Spacing with a textField

Spacings will be the same for all text or component sizes

Checkbox with a text field

Checkbox with a text field

Preview

Below a preview where we can find:

The 3 component sizes Small / Medium / Large
The corresponding font sizes
The 2 options Plain and Outline
The 3 shape options Sharp / Rounded / Round