@neo4j-ndl/react/skills/ndl-react/components/switch.md

React implementation of Neo4j Design System

# Switch

Import: `import { Switch } from '@neo4j-ndl/react'`

## Props

### Switch

| Prop | Type | Required | Default | Description |
|------|------|----------|---------|-------------|
| `ariaLabel` | `string` |  |  | The aria label of the switch. Required if the label is not a string. |
| `hasLeadingLabel` | `boolean` |  |  | Whether the label should be displayed before the switch |
| `isChecked` | `boolean` |  |  | Whether the switch is checked |
| `isDefaultChecked` | `boolean` |  |  | Checks the input by default in uncontrolled mode |
| `isDisabled` | `boolean` |  | `false` | Whether the switch is disabled |
| `isFluid` | `boolean` |  | `false` | Whether the switch & label should take the full available width of its container |
| `isIndeterminate` | `boolean` |  | `false` | Whether the switch is indeterminate |
| `label` | `ReactNode` |  |  | The label of the switch. If not a string, supply an aria label for screen reader support. |
| `onChange` | `((event: ChangeEvent<HTMLInputElement, Element>) => void)` |  |  | The callback function triggered when the switch value changes |
| `onClick` | `((event: MouseEvent<HTMLInputElement, MouseEvent>) => void)` |  |  | The callback function triggered when the switch is clicked |
| `ref` | `Ref<HTMLInputElement>` |  |  | A ref to apply to the root element. |
| `value` | `string \| number \| readonly string[]` |  |  | The value of the switch |

## Accessibility

## Implementation guidelines

The Switch component uses implicit label wrapping to associate the visible label with the input for screen readers. If you omit the label prop or use an invalid label (no text content), the `ariaLabel` prop will be required to ensure an accessible name.

## Examples

### Default

```tsx
import '@neo4j-ndl/base/lib/neo4j-ds-styles.css';

import { Switch } from '@neo4j-ndl/react';

const Component = () => {
  return <Switch label="Label" />;
};

export default Component;
```

### Controlled

```tsx
import '@neo4j-ndl/base/lib/neo4j-ds-styles.css';

import { Switch } from '@neo4j-ndl/react';
import { useState } from 'react';

const Component = () => {
  const [isChecked, setIsChecked] = useState(false);

  return (
    <Switch
      isChecked={isChecked}
      label="Controlled switch"
      onChange={(event) => setIsChecked(event.target.checked)}
    />
  );
};

export default Component;
```

### Disabled

```tsx
import '@neo4j-ndl/base/lib/neo4j-ds-styles.css';

import { Switch } from '@neo4j-ndl/react';

const Component = () => {
  return <Switch label="Label" isDisabled />;
};

export default Component;
```

### Full

```tsx
import '@neo4j-ndl/base/lib/neo4j-ds-styles.css';

import { Switch } from '@neo4j-ndl/react';
import { useState } from 'react';

const Component = () => {
  const [isChecked, setIsChecked] = useState<boolean>(false);

  const handleClick = (event: React.MouseEvent<HTMLInputElement>) => {
    console.info('Switch clicked!', event);
  };

  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    setIsChecked(event.target.checked);
    console.info('Switch changed:', event.target.checked);
  };

  return (
    <Switch
      label="Label"
      ariaLabel="Comprehensive switch example with all props"
      isChecked={isChecked}
      hasLeadingLabel={false}
      isDisabled={false}
      isFluid={false}
      value="switch-value"
      onClick={handleClick}
      onChange={handleChange}
    />
  );
};

export default Component;
```

### Has Label Before

```tsx
import '@neo4j-ndl/base/lib/neo4j-ds-styles.css';

import { Switch } from '@neo4j-ndl/react';

const Component = () => {
  return (
    <Switch
      label="Label"
      hasLeadingLabel
      onClick={() => console.info('Clicked on the switch!')}
    />
  );
};

export default Component;
```

### Indeterminate

```tsx
import '@neo4j-ndl/base/lib/neo4j-ds-styles.css';

import { Switch } from '@neo4j-ndl/react';

const Component = () => {
  return <Switch label="Label" isIndeterminate />;
};

export default Component;
```

### No Label

```tsx
import '@neo4j-ndl/base/lib/neo4j-ds-styles.css';

import { Switch } from '@neo4j-ndl/react';

const Component = () => {
  return <Switch ariaLabel="Label" />;
};

export default Component;
```