import { ArgTypes } from '@storybook/blocks';
import { SecretInput } from './SecretInput';

# Secret Input

Used for secret/password input. It has 2 states: **_configured_** and **_not configured_**.

- If configured it will disable the input and add a reset button that will
  clear the input and make it accessible.
- In non configured state it behaves like a normal password input.

This is used for passwords or anything that is encrypted on the server and is
later returned encrypted to the user (like datasource passwords).

### Usage

```tsx
import {SecretInput} from '@grafana/ui';

<SecretInput
  value={...}
  isConfigured={...}
  onChange={...}
  onReset={...}
/>
```

<ArgTypes of={SecretInput} />
