import { Meta, ArgTypes, Canvas } from "@storybook/addon-docs/blocks";
import { PasswordField } from "./PasswordField";
import * as PasswordFieldStories from "./PasswordField.stories";

<Meta of={PasswordFieldStories} />

# PasswordField

PasswordField allows a user to input a password. It includes a show/hide button on the right hand side.

## Install

```bash
yarn add @simplybusiness/mobius
```

## Usage

```js
import { PasswordField } from "@simplybusiness/mobius";
```

## Examples

### Default

<Canvas of={PasswordFieldStories.Default} />

## Accessibility

It's recommended to pass a `label` prop in order to show a visual label. When the `label` prop is not provided, make sure to provide the `aria-label` prop instead. If the text field is labeled by a separate element, the `aria-labelledby` props must be used with the id of the labeling element.

## Events

The `onChange` prop can be used to listen to changes of the value of the input. See the prop table for the complete list of events supported.
See the example of controlled component using the `onChange` prop.

## Props

<ArgTypes of={PasswordField} />

## Component HTML Structure and Class names

The following HTML is rendered for a PasswordField:

```html
<div class="mobius-password-field">
  <label class="mobius-label">{label}</label>
  <input class="mobius-text-field__input" type="text" />
  <div class="mobius-error-message">{errors}</div>
</div>
```

Class names are augmented with the following flags if true:

- \--is-disabled
- \--is-selected
- \--is-valid
- \--is-invalid
