Radio Group

<bh-radio-group> | BharatRadioGroup

The Radio Group component provides a set of mutually exclusive options that users can select from. It includes validation and various customization options.

Open in

AB

AB

Basic Usage

Preview

Open in

ABABAB

HTML

<bh-radio-group label="Small Size" size="small">
        <bh-radio-option value="A">A</bh-radio-option>
        <bh-radio-option value="B">B</bh-radio-option>
</bh-radio-group>
<bh-radio-group label="Medium Size" size="medium">
        <bh-radio-option value="A">A</bh-radio-option>
        <bh-radio-option value="B">B</bh-radio-option>
</bh-radio-group>
<bh-radio-group label="Large Size" size="large">
      <bh-radio-option value="A">A</bh-radio-option>
      <bh-radio-option value="B">B</bh-radio-option>
 </bh-radio-group>

React

import React from 'react';
import {BharatRadioOption,BharatRadioGroup} from 'bharat-ui/react/components/radiogroup'

function App() {
 return ( <>
    <BharatRadioGroup label="Small Size" size="small">
        <BharatRadioOption value="A">A</BharatRadioOption>
        <BharatRadioOption value="B">B</BharatRadioOption>
  </BharatRadioGroup>
  <BharatRadioGroup label="Medium Size" size="medium">
        <BharatRadioOption value="A">A</BharatRadioOption>
        <BharatRadioOption value="B">B</BharatRadioOption>
  </BharatRadioGroup>
  <BharatRadioGroup label="Large Size" size="large">
      <BharatRadioOption value="A">A</BharatRadioOption>
      <BharatRadioOption value="B">B</BharatRadioOption>
  </BharatRadioGroup>
  </>
  );
}
export default App;

Orientation

Control the layout direction of radio options:

Preview

Open in

ABAB

HTML

<bh-radio-group label="Horizontal" orientation="horizontal">
       <div style="margin-top:10px"></div>
      <bh-radio-option value="A">A</bh-radio-option>
      <bh-radio-option value="B">B</bh-radio-option>
    </bh-radio-group>
    <bh-radio-group label="Vertical" orientation="vertical">
      <bh-radio-option value="A">A</bh-radio-option>
      <bh-radio-option value="B">B</bh-radio-option>
  </bh-radio-group>

React

import React from 'react';
import {BharatRadioOption,BharatRadioGroup} from 'bharat-ui/react/components/radiogroup'

function App() {
 return ( <>
    <BharatRadioGroup  label="Horizontal" orientation="horizontal">
        <BharatRadioOption value="A">A</BharatRadioOption>
        <BharatRadioOption value="B">B</BharatRadioOption>
  </BharatRadioGroup>
  <BharatRadioGroup label="Vertical" orientation="vertical">
        <BharatRadioOption value="A">A</BharatRadioOption>
        <BharatRadioOption value="B">B</BharatRadioOption>
  </BharatRadioGroup>
  </>
  );
}
export default App;

Required Validation

Preview

Open in

AB

HTML

<bh-radio-group label="Required Field" required>
  <bh-radio-option value="option1">A</bh-radio-option>
  <bh-radio-option value="option2">B</bh-radio-option>
</bh-radio-group>

React

import React from 'react';
import {BharatRadioOption,BharatRadioGroup} from 'bharat-ui/react/components/radiogroup'

function App() {
 return <BharatRadioGroup  label="Required Field" required>
            <BharatRadioOption value="A">A</BharatRadioOption>
            <BharatRadioOption value="B">B</BharatRadioOption>
        </BharatRadioGroup>
}
export default App;

Disabled State

Preview

Open in

ABEnabledDisabled

HTML

<bh-radio-group label="Disabled Group" disabled>
  <bh-radio-option value="option1">Option 1</bh-radio-option>
  <bh-radio-option value="option2">Option 2</bh-radio-option>
</bh-radio-group>

<bh-radio-group label="Individual Disabled Options">
  <bh-radio-option value="option1">Enabled Option</bh-radio-option>
  <bh-radio-option value="option2" disabled>Disabled Option</bh-radio-option>
</bh-radio-group>

React

import React from 'react';
import {BharatRadioOption,BharatRadioGroup} from 'bharat-ui/react/components/radiogroup'

function App() {
 return (
   <BharatRadioGroup label="Disabled Group" disabled>
            <BharatRadioOption value="A">A</BharatRadioOption>
            <BharatRadioOption value="B">B</BharatRadioOption>
   </BharatRadioGroup>

 <BharatRadioGroup label="Individual Disabled Option">
            <BharatRadioOption value="A" >Enabled Option</BharatRadioOption>
            <BharatRadioOption value="B" disabled>Disabled Option</BharatRadioOption>
 </BharatRadioGroup>
 );
}
export default App;

Radio Group Properties

Property	Type	Description
label	string	The label for the radio group
value	string	Currently selected value
disabled	boolean	Disables the entire radio group
required	boolean	Makes selection required
size	string	Size of radio buttons: small, medium, large
orientation	string	Layout direction: vertical, horizontal
fontColor	string	Style font for radio group
labelColor	string	Style radio group label color
optionTextColor	string	Style radio group options text color
accentColor	string	Style radio group options accent color

Radio Option Properties

Property	Type	Description
value	string	Value for the radio option
disabled	boolean	Disables individual radio option
checked	boolean	Default checked state for radio option
textColor	string	Style radio option text color
accentColor	string	Style radio option accent color

Events

Event	Detail	Description
radio-selected	{ value: string }	Fired when radio option is selected
change	<bh-radio-group>	Emits { label, values } when selection changes