Forms
Radio
The radio component allows users to select one option from multiple choices. It comes in various styles, variants, and colors.
Basic example
Default
Basic radio example.
Label and helper text
Please use `label-text` for the label and `helper-text` for the text that appears at the bottom as helper text.
Types
Default
Apply the `radio` class to style radio buttons.
Inset radio
Use `radio-inset` alongside `radio` to create an inset radio.
Color
Semantic color — Default radio
Example of semantic color in default and inset radio.
Semantic color — Inset radio
Use the `radio-{semantic-color}` class in combination with the `radio-inset` class.
Custom color — Default radio
Example of custom color in default and custom radio.
Custom color — Inset radio
Custom inset radio.
Sizes
Default radio size
Add responsive class `radio-{size}` where `{size} = xs|sm|md|lg|xl` for radio of different sizes.
Inset radio size
Add responsive class `radio-{size}` where `{size} = xs|sm|md|lg|xl` for radio inset of different sizes.
Validation states
Success state
Success state can be show using `is-valid` class.
Error state
Error state can be show using `is-invalid` class.
Illustrations
Disable
Disable the radio component to prevent user selection by applying the `disabled` attribute.
Inline radio group
A group of radio components.
Vertical radio group
A vertical group of radio components.
Radio in dropdown
Here’s an example of a radio in dropdown that you can use right away.
Radio list group
Below given example can be used to show a list of radio buttons inside a grouped list.
Select you favourite language:
Horizontal list group
Use below example to group up radio button components inside a list.
Select you favourite language:
Join radio with btn style
Create a radio button group using the `join` and `btn` component classes.
Custom options
Basic radio
Utilizing the `custom-option` class within the `label` enables the creation of custom radio buttons with improved styling and functionality.
Hidden radio button
Utilize the `hidden` TailwindCSS utility class to conceal the radio button.
Basic label radio
Utilizing the `custom-soft-option` class within the `label` demonstrates this distinctive styling approach, where the label background becomes primary when checked.
Iconic custom radios
Customize the styling using utility classes according to your custom preferences, as illustrated below.
Image as radio button
This example displays an image as a radio button.
Class referenceThe component, style, color, state, size and modifier classes available for this component.
| Class | Type | Description |
|---|---|---|
radio | component | Component class for radio. |
custom-option | component | For custom option container. |
custom-soft-option | component | For custom option container with background. |
label-text | part | Base class for title label text. |
helper-text | part | Base class for helper label text. |
radio-inset | style | Targets radio input. |
radio-primary | color | Adds 'primary' color to radio. |
radio-secondary | color | Adds 'secondary' color to radio. |
radio-accent | color | Adds 'accent' color to radio. |
radio-info | color | Adds 'info' color to radio. |
radio-success | color | Adds 'success' color to radio. |
radio-warning | color | Adds 'warning' color to radio. |
radio-error | color | Adds 'error' color to radio. |
is-valid | state | Adds success style to the input. |
is-invalid | state | Adds error style to the input. |
radio-xs | size | radio with extra small size. |
radio-sm | size | radio with small size. |
radio-md | size | radio with medium(default) size. |
radio-lg | size | radio with large size. |
radio-xl | size | radio with extra large size. |