# SwitchProps

**Kind:** Interface

Props for the `Switch` component. Also accepts:
* `SwitchStyleProps`

## Properties

### `aria-describedby?`

Type: `undefined | string`

A space separated list of description element IDs.

### `aria-label?`

Type: `undefined | string`

The label for the switch. Use this if the switch lacks a visible text label.

### `aria-labelledby?`

Type: `undefined | string`

A space separated list of label element IDs.

### `className?`

Type: `undefined | string`

Additional class names to apply to the switch.

### `disabled?`

Type: `undefined | false | true`

If set to `true`, the user cannot interact with the switch.

### `id?`

Type: `undefined | string`

The ID of the switch element.

### `label?`

Type: `React.ReactNode | string`

The label node for the switch.

### `onChange?`

Type: `undefined | object`

A function to be called when the switch is toggled.

### `size?`

Type: `ControlSizeProp`

The size of the switch. Defaults to `default`.

### `style?`

Type: `React.CSSProperties`

Additional styles to apply to the switch.

### `tabIndex?`

Type: `undefined | number`

Indicates if the switch can be focused and if/where it participates in sequential keyboard navigation.

### `value`

Type: `boolean`

If set to `true`, the switch will be switchd on.

### `variant?`

Type: `SwitchVariant`

The variant of the switch. Defaults to `default` (green).

---

## SwitchSyncedProps

**Kind:** Interface

Props for the `SwitchSynced` component. Also accepts:
* `SwitchStyleProps`

### Properties

#### `aria-describedby?`

Type: `undefined | string`

A space separated list of description element IDs.

#### `aria-label?`

Type: `undefined | string`

The label for the switch. Use this if the switch lacks a visible text label.

#### `aria-labelledby?`

Type: `undefined | string`

A space separated list of label element IDs.

#### `className?`

Type: `undefined | string`

Additional class names to apply to the switch.

#### `disabled?`

Type: `undefined | false | true`

If set to `true`, the user cannot interact with the switch.

#### `globalConfigKey`

Type: `GlobalConfigKey`

A string key or array key path in `GlobalConfig`. The switch option will always reflect the boolean value stored in `globalConfig` for this key. Toggling the switch will update `globalConfig`.

#### `id?`

Type: `undefined | string`

The ID of the switch element.

#### `label?`

Type: `React.ReactNode | string`

The label node for the switch.

#### `onChange?`

Type: `undefined | object`

A function to be called when the switch is toggled.

#### `size?`

Type: `ControlSizeProp`

The size of the switch. Defaults to `default`.

#### `style?`

Type: `React.CSSProperties`

Additional styles to apply to the switch.

#### `tabIndex?`

Type: `undefined | number`

Indicates if the switch can be focused and if/where it participates in sequential keyboard navigation.

#### `variant?`

Type: `SwitchVariant`

The variant of the switch. Defaults to `default` (green).

---

## Switch

**Kind:** Component

A toggle switch for controlling boolean values. Similar to a checkbox.

[[ Story id="switch--example" title="Switch example" ]]

By default, the Switch component is styled to be full-width (`width="100%"`) with a gray
background to match other controls like Select, SelectButtons, Input, etc. This behavior can be
overridden using style props. For example, you can set `backgroundColor="transparent"` on the
Switch for a transparent background.

**Parameters:**
- `props` (`SwitchProps`)
- `ref` (`React.Ref<HTMLDivElement>`)

**Returns:** `Element`

---

## SwitchSynced

**Kind:** Component

A toggleable switch for controlling boolean values, synced with `GlobalConfig`. Similar to a checkbox.

[[ Story id="switch--example-synced" title="Synced switch example" ]]

**Parameters:**
- `props` (`SwitchSyncedProps`)
- `ref` (`React.Ref<HTMLDivElement>`)

**Returns:** `Element`