Switch

<bh-switch> | BharatSwitch

The switch component represents a binary on/off state with support for labels, multiple sizes, and rich customization options.

Open in

Basic Usage

Open in

<bh-switch></bh-switch>

import React from 'react';
import { BharatSwitch } from 'bharat-ui/react/components/switch';

function App() {
return <BharatSwitch />
}
export default App;

Sizes

The Switch component supports three sizes:

Open in

    <bh-switch size="small" switchLabel="Small"></bh-switch>
    <bh-switch size="medium" switchLabel="Medium"></bh-switch>
    <bh-switch size="large" switchLabel="Large"></bh-switch>

import React from 'react';
import { BharatSwitch } from 'bharat-ui/react/components/switch';

function App() {
return (
  <>
       <BharatSwitch size="small" switchLabel="Small"></BharatSwitch>
      <BharatSwitch size="medium" switchLabel="Medium"></BharatSwitch>
      <BharatSwitch size="large" switchLabel="Large"></BharatSwitch>
  </>
);
}
export default App;

Colors & States

Customize active/inactive switch colors and label color:

Open in

 <bh-switch
  size="medium"
  switchLabel="Switch"
  switchCheckedColor="#f9431b"
  switchDefaultColor="#322522"
  labelColor="#f9431b"
  ></bh-switch>

import React from 'react';
import { BharatSwitch } from 'bharat-ui/react/components/switch';

function App() {
return <BharatSwitch size="medium"
    switchLabel="Switch"
    switchCheckedColor="#f9431b"
    switchDefaultColor="#322522"
    labelColor="#f9431b"></BharatSwitch>
}
export default App;

Checked State

You can set the switch default state as checked by setting the checked property:

Open in

 <bh-switch size="medium" switchLabel="Checked" checked></bh-switch>

import React from 'react';
import { BharatSwitch } from 'bharat-ui/react/components/switch';

function App() {
return <BharatSwitch  size="medium" switchLabel="Checked" checked></BharatSwitch>
}
export default App;

Disabled State

You can disable the switch by setting the disabled property:

Open in

<bh-switch size="medium" switchLabel="Disabled" disabled></bh-switch>

import React from 'react';
import { BharatSwitch } from 'bharat-ui/react/components/switch';

function App() {
return <BharatSwitch  size="medium" switchLabel="Disabled" disabled></BharatSwitch>
}
export default App;

Properties

Property	Type	Description
`size`	`string`	Size of the switch: “small”, “medium”, “large”
`switchLabel`	`string`	Optional label next to the switch
`switchCheckedColor`	`string`	Background color when switch is ON
`switchDefaultColor`	`string`	Background color when switch is OFF
`labelColor`	`string`	Color of the switch label text
`disabled`	`boolean`	If true, disables interaction
`checked`	`boolean`	Initial checked state of the switch

Events

Event Name	Payload	Description
`switch-selected`	`{ value, checked }`	Fired when switch is toggled