Checkbox Group

<bh-checkbox-group> | BharatCheckboxGroup

The Checkbox Group component allows users to select multiple options with full control over size, layout, and validation. It consists of a group container and child checkbox options.

Open in

ABAB

Basic Usage

Preview

Open in

ABABAB

HTML

  <bh-checkbox-group label="Small Size" size="small">
        <bh-checkbox-option value="1">Option 1</bh-checkbox-option>
        <bh-checkbox-option value="2">Option 2</bh-checkbox-option>
  </bh-checkbox-group>
  <bh-checkbox-group label="Medium Size" size="medium">
        <bh-checkbox-option value="1">Option 1</bh-checkbox-option>
        <bh-checkbox-option value="2">Option 2</bh-checkbox-option>
  </bh-checkbox-group>
  <bh-checkbox-group label="Large Size" size="large">
      <bh-checkbox-option value="1">Option 1</bh-checkbox-option>
      <bh-checkbox-option value="2">Option 2</bh-checkbox-option>
  </bh-checkbox-group>

React

import React from 'react';
import { BharatCheckboxGroup,BharatCheckboxOption} from 'bharat-ui/react/components/checkboxgroup'
function App() {
 return ( <>
    <BharatCheckboxGroup label="Small Size" size="small">
        <BharatCheckboxOption value="1">Option 1</BharatCheckboxOption>
        <BharatCheckboxOption value="2">Option 2</BharatCheckboxOption>
  </BharatCheckboxGroup>
  <BharatCheckboxGroup label="Medium Size" size="medium">
        <BharatCheckboxOption value="1">Option 1</BharatCheckboxOption>
        <BharatCheckboxOption value="2">Option 2</BharatCheckboxOption>
  </BharatCheckboxGroup>
  <BharatCheckboxGroup label="Large Size" size="large">
      <BharatCheckboxOption value="1">Option 1</BharatCheckboxOption>
      <BharatCheckboxOption value="2">Option 2</BharatCheckboxOption>
  </BharatCheckboxGroup>
  </>
  );
}
export default App;

Orientation

Preview

Open in

ABAB

HTML

<bh-checkbox-group label="Horizontal" orientation="horizontal">
  <bh-checkbox-option value="a">A</bh-checkbox-option>
  <bh-checkbox-option value="b">B</bh-checkbox-option>
  <bh-checkbox-option value="c">C</bh-checkbox-option>
</bh-checkbox-group>

 <bh-checkbox-group label="Vertical" orientation="vertical">
      <bh-checkbox-option value="a">A</bh-checkbox-option>
      <bh-checkbox-option value="b">B</bh-checkbox-option>
      <bh-checkbox-option value="c">C</bh-checkbox-option>
  </bh-checkbox-group>

React

import React from 'react';
import { BharatCheckboxGroup,BharatCheckboxOption} from 'bharat-ui/react/components/checkboxgroup'
function App() {
 return ( <>
    <BharatCheckboxGroup label="Horizontal" orientation="horizontal">
        <BharatCheckboxOption value="a">A</BharatCheckboxOption>
        <BharatCheckboxOption value="b">B</BharatCheckboxOption>
  </BharatCheckboxGroup>
  <BharatCheckboxGroup label="Vertical" orientation="vertical">
        <BharatCheckboxOption value="a">A</BharatCheckboxOption>
        <BharatCheckboxOption value="b">B</BharatCheckboxOption>
  </BharatCheckboxGroup>
  </>
  );
}
export default App;

Required Validation

Preview

Open in

AB

HTML

<bh-checkbox-group label="Required Group" required>
  <bh-checkbox-option value="A">A</bh-checkbox-option>
  <bh-checkbox-option value="B">B</bh-checkbox-option>
</bh-checkbox-group>

React

import React from 'react';
import { BharatCheckboxGroup,BharatCheckboxOption} from 'bharat-ui/react/components/checkboxgroup'
function App() {
 return (
    <BharatCheckboxGroup label="Required Group" required>
        <BharatCheckboxOption value="a">A</BharatCheckboxOption>
        <BharatCheckboxOption value="b">B</BharatCheckboxOption>
  </BharatCheckboxGroup>

  );
}
export default App;

Disabled State

Preview

Open in

ABEnabledDisabled

HTML

<bh-checkbox-group label="Disabled" disabled>
      <bh-checkbox-option value="option1">A</bh-checkbox-option>
      <bh-checkbox-option value="option2">B</bh-checkbox-option>
</bh-checkbox-group>

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

React

import React from 'react';
import {BharatCheckboxGroup,BharatCheckboxOption} from 'bharat-ui/react/components/radiogroup'

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

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

Properties

<bh-checkbox-group> | BharatCheckboxGroup

Property	Type	Description
label	string	Group label
values	array	Selected values
orientation	string	"vertical" (default) or "horizontal"
size	string	"small", "medium", or "large"
required	boolean	Enforce validation for selection
disabled	boolean	Disables the entire group
labelColor	string	Tweak the label color of the Checkbox group
checkboxColor	string	Tweak the checkbox color for the entire group
optionTextColor	string	Tweak the checkbox-option label color for entire group color

<bh-checkbox-option> | BharatCheckboxOption

Property	Type	Description
value	string	Option value
checked	boolean	Whether the checkbox is selected
disabled	boolean	Disable individual option
color	string	Change color of individual option
textColor	string	Change color of individual option label

Events

---

Event	Fired by	Description
checkbox-selected	<bh-checkbox-option>	Emits { value, checked } on toggle
change	<bh-checkbox-group>	Emits { label, values } when selection changes