Radio Button
The radio button is a single-select UI control. A radio button may be either Large or Small. Radio buttons should only ever be used when the user needs to select one of a number of options. Never use a radio button when only one selection is available.
![Radio Button](https://assets-global.website-files.com/5cfe763171000a160b564d24/5ea1b984b910a36c09ca2847_h_radio%20button%403x.png)
Anatomy
Radio buttons are made of the radio input with a label or slot option.
Label
The checkbox input with the label next to it is the default.
![](https://assets-global.website-files.com/5cfe763171000a160b564d24/60fae406ea3ec35208829e07_MArHoMd1_fP2DxWkP1SjuCbDw9S7zQ86yZq_Pn2u5BzJiz-7mR0LVBhOKKk__70j0ETTft0EKswJHkl8k5LhqFTZ0aqleOio-JyRn53lHYBLdNQHDzhvqqGcQ12sB6QR_VxpiZsJ.png)
- Radio input
- Label - Body 1 or Caption
Slot
The radio input with a slot next to it lets the input be attached to anything. This may be a paragraph or image. This is determined by the design.
![](https://assets-global.website-files.com/5cfe763171000a160b564d24/638f61d2fe3bbc20cc0d763b_zO9K6OT7Ndux5izg8aYq0i-wDj2rJ6EMxsv8es3vQ9XDJop5ukYfn6w1X61uIppMvK39Z4wPL0Ka5gTMSXFxp0WmYX8pWZbwYa92EJS-lrqI8xvKPVghPVieBxh_f6okSn0a86Mt9bQ2CvfiS61KK7PH7m_IOO7mRMMaG8CXYMxq8t5hKmm1mNd-74GabQ.png)
- Radio input
- Slot (optional)
Size
Radio buttons may either be Large or Small depending on the use case. The Large variant utilizes our Body 1 type style, so it is preferable in most use cases. The Small version may be used when the Caption type style and smaller imprint is preferable.
![](https://assets-global.website-files.com/5cfe763171000a160b564d24/60fae405d26a3a0b1ba8c874_Puz2WYcYwI5TyeRYFcirX6ELye5ITj7JwUV-41grvdkVEo_DXvK3mznmw0hNGtdwwGYFCrXm0vI6dlaD4fOLkdqmbSz4wZqgTQ6hKXUpfDCvc4UUOnAmlnFPDdA-BtPSyOEI9BWZ.png)
- Radio input
- Label - Body 1
![](https://assets-global.website-files.com/5cfe763171000a160b564d24/60fae4053792f54d2dc620ee_XWmU3ZucIS2BzFB_vkZbPZcymuxlYR8qOYcKshqPNDxZ4Pt74hGbsc3Wqqk5xIeQnTeCu1DW_3bfn5zPOn6_Ls5dH7eKhmvkulBJPjFVMlSpXL9I_DwsypCicU2Rl0-ky7j_IEIy.png)
- Radio input
- Label - Caption
Container
For mobile, it makes sense to have a bigger hit space for the radio button. The radio button will be housed in a container to give it more of a native look but also allow the user to be able to select easier.
![](https://assets-global.website-files.com/5cfe763171000a160b564d24/638f61d13f8eac745b444784_as8Y-KVUuEBEuogqObMM3eznzz26qHJO_9g4R4i3TaNpFG_Tluhf4KLHWjOAXb9gxMHVXQfE0IOh7-ppb6AU8lCWWjsJjjNCRykSHODa0EbK3tMgG241JMrK8J6v8Xad0rLyUxErBM_QVAZbaL7KerA2Gae2yz3jFM1L8ZRxF3l2NTDXSmMGUjKV9Kmg2g.png)
- Container
- Radio Button - Label or Slot Variant
States
![](https://assets-global.website-files.com/5cfe763171000a160b564d24/60fae464c428bb1a2c3d1378_JD7ubRKVa45cTJMFR_-SU_E5NVfUqNDcJxLonI7Df03-s6JCvCqdpFbIU8VvVnmtqtqr_vfV4ETqgeg3prv3rWRF-wpAlBiAiHmGleF8ezDQoAhe4yQJFJIOfrxG_kKRI6xjAbQ3.png)
Placement
Radio buttons should always be placed in a radio button group, directly beneath the heading or content that describes the context and implications of the selection. Radio button groups should typically be placed 24px below meta content, left-aligned to the edge of the parent container. Radio button groups should always contain two or more options—never use a radio button when only one selection is available.
Developer Docs
Vue Developer DocsComponent documentation coming soon!