--- title: "Checkboxes & Radio Button | GoodBarber's Design System" description: "# Anatomy\r\n\r\n## Checkboxes\r\n\r\n![Checkboxes height & width](images/designsystem/Components-Checkbox-RadioButton-Anatomy-Checkboxes.png)\r\n\r\n \r\n\r\n## Radio buttons\r\n\r\n![Radio buttons height & width](images/designsystem/Components-Checkbox-RadioButton-An" canonical_url: "https://www.goodbarber.com/uxdesign/checkboxes-radio-button/" lang: nl --- # Checkboxes & Radio Button | GoodBarber's Design System [Design System](https://nl.goodbarber.com/uxdesign/) ![](https://portal.ww-cdn.com/portal_static/svg/fapro/solid/grid.b60a521defb3.svg) [https://nl.goodbarber.com/uxdesign/](https://nl.goodbarber.com/uxdesign/) ![](https://portal.ww-cdn.com/portal_static/svg/fapro/regular/chevron-up.4b0a6b4e88c8.svg) ![](https://portal.ww-cdn.com/portal_static/svg/fapro/regular/chevron-down.e16b9408a703.svg) ![](https://portal.ww-cdn.com/portal_static/svg/fapro/solid/grid.b60a521defb3.svg) [Overview](https://nl.goodbarber.com/uxdesign/) - [Foundations](/uxdesign/foundations/) * Layout + [Grid](/uxdesign/grid/) + [Spacing](/uxdesign/spacing/) + [Breakpoints](/uxdesign/breakpoints/) + [Layers](/uxdesign/layers/) * Graphic elements + [Color](/uxdesign/color/) + [Typography](/uxdesign/typography/) + [Images Aspect Ratios](/uxdesign/images-aspect-ratios/) + [Icons](/uxdesign/icons/) - [Atomic Components](/uxdesign/atomic-components/) * [Color atom](/uxdesign/atom-color/) * [Font atom](/uxdesign/atom-font/) * [Image atom](/uxdesign/atom-image/) * [Gradient atom](/uxdesign/atom-gradient/) * [Shape atom](/uxdesign/atom-shape/) * [Shadow atom](/uxdesign/atom-shadow/) * [Size atom](/uxdesign/atom-size/) * [Border atom](/uxdesign/atom-border/) * [Blur atom](/uxdesign/atom-blur/) * [Overlay atom](/uxdesign/atom-overlay/) * [Immersive feedback atom](/uxdesign/atom-immersive-feedback/) - [UI Components](/uxdesign/ui-components/) * [Background](/uxdesign/background/) * [Text Field](/uxdesign/textfield/) * [Dropdown](/uxdesign/dropdown/) * [Date & Time Picker](/uxdesign/date-time-picker/) * [Checkboxes & Radio Button](/uxdesign/checkboxes-radio-button/) * [Button](/uxdesign/button/) * [Thumbnail](/uxdesign/thumbnail/) * [Form](/uxdesign/form/) # Checkboxes & Radio Button UI Components These components are used to make selections and choices within your app. Height, width, and size are fully optimized to adapt to all devices. [https://portal.ww-cdn.com/portal_static/images/designsystem/videos/checkboxesradiobutton.47cd1dd1b5cb.mp4](https://portal.ww-cdn.com/portal_static/images/designsystem/videos/checkboxesradiobutton.47cd1dd1b5cb.mp4) ## Introduction 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](https://portal.ww-cdn.com/portal_static/images/designsystem/Components-Checkbox-RadioButton-Anatomy-Checkboxes.71707e5bb731.png) *Checkboxes height & width* ### Radio buttons ![Radio buttons height & width](https://portal.ww-cdn.com/portal_static/images/designsystem/Components-Checkbox-RadioButton-Anatomy-RadioButton.4503f378ba95.png) *Radio buttons height & width* ### Font Size The [Font size](/uxdesign/atom-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](https://portal.ww-cdn.com/portal_static/images/designsystem/Components-Checkbox-RadioButton-Anatomy-TextSize.4c5cc9e346ef.png) *Text and component size according the size atom* ## Properties ### Shape Checkboxes Border Radius ![Shape on checkboxes](https://portal.ww-cdn.com/portal_static/images/designsystem/Components-Checkbox-RadioButton-Properties-Shape.e08c6996b982.png) *Shape on checkboxes* ### Plain & Outline options Border size values by state for all sizes (Small / Medium / Large) ![Style option on checkboxes and radio buttons](https://portal.ww-cdn.com/portal_static/images/designsystem/Components-Checkbox-RadioButton-Properties-Plain-Outline.2101a6b67522.png) *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](/uxdesign/form/#layout) ![Checkboxes and radio buttons in form](https://portal.ww-cdn.com/portal_static/images/designsystem/Components-Checkbox-RadioButton-Layout-Spacing-Form.d06a3d87a121.png) *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](https://portal.ww-cdn.com/portal_static/images/designsystem/Components-Checkbox-RadioButton-Layout-Spacing-TextField.1febcd7049ed.png) *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** [Components-Checkboxes-video.mov](https://player.vimeo.com/video/781497394?h=56898633b8&badge=0&autopause=0&autoplay=1&loop=1&player_id=0&app_id=58479)