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

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

# PasswordField
 
The PasswordField component combines the Input, Label, IconButton and HelpText components to create a complete, form-ready solution.

Password fields should specify requirements, whenever possible. 
However, they should not allow users to disable the mask button in most cases, unless for a good reason. 
This feature is helpful for smaller screens where the users are more likely to incorrectly enter their passwords than on a computer with a keyboard.

### Required components

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

### Accessibility

#### Keyboard Navigation

These keys provide additional functionality to the component. 

| Keys | Functions |
| ---- | --------- |
| Tab | The input is focusable using the Tab key and follows the page tab sequence. |
| Shift + Tab | Moves focus to the previous focusable component.|
| Space or Enter | Toggles the PasswordType component to hide or reveal the input. |

#### Screen readers

This component uses the following attributes to assist screen readers:
- The input component uses the **`aria-labelledby`** attribute to reference the label ID.
- The icon buttons use **`aria-label`** attribute to provide an accessible name.