React Tailwind Custom Radio Button Component

Radio Buttons are essential form elements, allowing users to select only one option from multiple choices.

They’re especially useful in settings menus, forms, or any scenario where a single-choice selection is required. While default radio buttons are functional, customizing them can make them more visually appealing and on-brand.

In this essay you will get the custom radio button component built in React with Tailwind CSS, perfect for creating a smooth and stylish user experience.

Custom Radio Button UI

React Tailwind CSS Custom Radio Button Component

Here’s the code for a reusable custom radio button component. This component uses React and Tailwind CSS to create a clean, minimalistic style with a vibrant selection indicator.


1import React, { ChangeEvent } from 'react'
2
3interface RadioButtonProps {
4  name: string
5  id: string
6  value: string
7  onChange: (e: ChangeEvent<HTMLInputElement>) => void
8  checked: boolean
9  text: string
10}
11
12const RadioButton: React.FC<RadioButtonProps> = ({
13  name,
14  id,
15  value,
16  onChange,
17  checked,
18  text,
19}) => {
20  return (
21    <label
22      htmlFor={id}
23      className="mr-4 cursor-pointer text-sm font-medium text-[#303030]"
24    >
25      <input
26        type="radio"
27        name={name}
28        id={id}
29        value={value}
30        onChange={onChange}
31        checked={checked}
32        className="peer sr-only m-0"
33      />
34      <span className="relative top-1 mr-1 inline-block size-5 rounded-full border-2 border-[#9a9a9a] peer-checked:border-[#f4b400]">
35        <span
36          className={`absolute left-1/2 top-1/2 h-3 w-3 -translate-x-1/2 -translate-y-1/2 rounded-full transition-opacity duration-200 ${checked ? 'bg-[#f4b400] opacity-100' : 'opacity-0'}`}
37        />
38      </span>
39      {text}
40    </label>
41  )
42}
43
44export default RadioButton

Explanation of the RadioButton Component

Props: The component takes in props like name, id, value, onChange, checked, and text to control its behavior and display.
Input Styling: The radio button is visually hidden (sr-only), while a styled span shows the selected state.
Checked State: The inner span changes color when selected, making it clear to the user which option is active.

How to Use the RadioButton Component in App.tsx

Here’s how you can use the RadioButton component in your main app file to create a theme selector:


1import { ChangeEvent, useState } from 'react'
2import RadioButton from './components/RadioButton'
3
4function App() {
5  const [theme, setTheme] = useState({ dark: false, light: false })
6
7  const onChangeTheme = (e: ChangeEvent<HTMLInputElement>) => {
8    const { name } = e.target
9    setTheme({
10      dark: name === 'dark',
11      light: name === 'light',
12    })
13  }
14
15  return (
16    <div>
17      <p className="mb-2 text-[#202020]">Please select a theme</p>
18      <RadioButton
19        name="dark"
20        id="dark"
21        value="Dark"
22        text="Dark"
23        onChange={onChangeTheme}
24        checked={theme.dark}
25      />
26      <RadioButton
27        name="light"
28        id="light"
29        value="Light"
30        text="Light"
31        onChange={onChangeTheme}
32        checked={theme.light}
33      />
34    </div>
35  )
36}
37
38export default App

How It Works

State Management: useState manages which theme option is selected. The onChangeTheme function updates the state when a user clicks on a radio button.
Radio Button Interaction: Each RadioButton passes name, id, value, text, and onChange props, while checked controls the active selection.

Conclusion

Custom radio buttons in React with Tailwind CSS give you control over styling without sacrificing accessibility or functionality. By following this guide, you can easily add attractive, user-friendly radio buttons to your forms and applications. Feel free to expand on this code by adding more options or customizing the style to better suit your project’s needs.