import { Meta } from '@storybook/addon-docs';

<Meta title="Components/SwitchField/SwitchField" />

# SwitchField

The SwitchField component combines a switch, label, and helper text for a complete solution. 

This component should be used for:
- Communicating activations and deactivations.
- Describing changes with immediate response (setting applied, hidden functionality) without user confirmation. 

It shouldn’t change labels while toggling between states, or have indeterminate partial states. It can only be on or off.

### Required components

This component can be used independently and does not require additional components. 

### Accessibility

This component should adhere to the [WAI-ARIA Switch](https://www.w3.org/WAI/ARIA/apg/patterns/switch/) accessibility guidelines. 

#### Keyboard Navigation

These keys provide additional functionality to the component. 

| Keys | Functions |
| ---- | --------- |
| Tab | The field is focusable using the Tab key and follows the page tab sequence. |
| Shift + Tab | Moves focus to the previous focusable component.|
| Space | When focused, Space toggles the switched field. |

#### Screen readers

The hidden input uses the **`aria-labelledby`** attribute to associate the label, the **`aria-label`** attribute to provide an accessible name, 
and the **`aria-checked`** attribute for the switched state.