Switch

Examples

Basic

Switches allow the user to toggle an option on or off.

<ods-switch>Switch</ods-switch>

import { OdsSwitch } from '@ods/components/react.switch';

const Example = () => {
  return (
    <OdsSwitch>Switch</OdsSwitch>
  );
}

export default Example;

Checked

Use the checked attribute to activate the switch.

<ods-switch checked>Switch</ods-switch>

import { OdsSwitch } from '@ods/components/react.switch';

const Example = () => {
  return (
    <OdsSwitch checked>Switch</OdsSwitch>
  );
}

export default Example;

Disabled

Use the disabled attribute to disable the switch.

<ods-switch disabled>Switch</ods-switch>

import { OdsSwitch } from '@ods/components/react.switch';

const Example = () => {
  return (
    <OdsSwitch disabled>Switch</OdsSwitch>
  );
}

export default Example;

Help Text

Add descriptive help text to a switch with the help-text attribute. For help texts that contain HTML, use the *help-text slot instead.

<ods-switch help-text="What should the user know about the switch?">Label</ods-switch>

import { OdsSwitch } from '@ods/components/react.switch';

const Example = () => {
  return (
    <OdsSwitch help-text="What should the user know about the switch?">Label</OdsSwitch>
  );
}

export default Example;

Handling An Event

You can listen for the ods-change event to determine when a switch is updated. You can see other switch events here . You can also see how a switch is used in forms by checking out the form section .

<ods-switch id="switch-example">Switch</ods-switch>

<script>
  const switchExample = document.getElementById('switch-example');

  const onChangeHandler = (event) => {
    const target = event.target;
    const status = target.checked ? 'on' : 'off';

    alert(`Switch ${status}`);
  };

  switchExample.addEventListener('ods-change', (event) => onChangeHandler(event));
</script>

import { OdsSwitch } from '@ods/components/react.switch';
import { OdsInputEvent } from '@ods/components/react';

export const Example = () => {
  const onChangeHandler = (event: OdsInputEvent) => {
    const target = event.target as HTMLInputElement;
    const status = target.checked ? 'on' : 'off';

    alert(`Switch ${status}`);
  };

  return (
    <OdsSwitch onOdsChange={onChangeHandler}>Switch</OdsSwitch>
  )
}

export default Example;

Importing

import '@ods/components/web.switch';

import { OdsSwitch } from '@ods/components/react.switch';

import { OdsSwitch } from '@ods/components/react.switch';