Radio Component - Rohit UI

Import

import { Radio } from 'rohit-ui';

Examples

Basic Radio

Option 1

Option 2 (Selected)

// Basic radio button
<Radio label="Option 1" />

// Selected radio button
<Radio label="Option 2" checked />

Disabled Radio

Disabled

// Disabled radio button
<Radio label="Disabled" disabled />

Radio Group

Apple

Banana

// Radio group example
<Radio value="apple" label="Apple" />

<Radio value="banana" label="Banana" />

Rohit Mode Radio

Unnecessarily Complicated

// Rohit Mode radio button
<Radio label="Unnecessarily Complicated" checked rohitMode />

Note: In Rohit Mode, the radio will wiggle, change state unexpectedly, and sometimes refuse to be deselected.

Props

Name	Type	Default	Description
label	string	-	Label text displayed next to the radio button
checked	boolean	false	Whether the radio is selected
disabled	boolean	false	Disables the radio, preventing interactions
name	string	-	Name attribute of the radio input
id	string	auto-generated	ID attribute of the radio input
onChange	function	-	Function called when the radio state changes
value	string	-	Value of the radio button (for use in groups)
rohitMode	boolean	false	Enables Rohit Mode with silly animations and behaviors

CSS Customization

You can customize the Radio component using styled-components:

import styled from 'styled-components';
import { Radio } from 'rohit-ui';

const CustomRadio = styled(Radio)`
  .radio-input {
    width: 18px;
    height: 18px;
    border: 2px solid var(--win98-navy);
    border-radius: 50%;
    margin-right: 8px;
    position: relative;
    
    &:checked {
      &::after {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 10px;
        height: 10px;
        background: var(--win98-navy);
        border-radius: 50%;
      }
    }
  }
  
  .radio-label {
    font-family: 'Comic Sans MS', sans-serif;
    color: var(--win98-navy);
    font-size: 1.1em;
  }
`;

function MyComponent() {
  return (
    <CustomRadio
      label="Custom Radio"
      checked={checked}
      onChange={setChecked}
    />
  );
}

Rohit Mode Behavior

When Rohit Mode is enabled, the Radio component will:

Wiggle randomly, especially when hovered
Sometimes change its state unexpectedly
Occasionally refuse to be deselected (because Rohit always wants you to pick something)
Display a comically complex animation when changing state
Sometimes require multiple clicks to change state