# Sensitive Input

A password or token field: masked by default, with a button that reveals it and an optional one that copies it.

Source page: https://sproutboat.com/ikada/components/sensitive-input

## Installation
```sh
npx shadcn@latest add https://sproutboat.com/ikada/r/sensitive-input.json
```
Or from the package: `import { SensitiveInput } from "@sproutboat/ikada";`
## Usage
```tsx
import { SensitiveInput } from "@/components/ikada/sensitive-input";

<SensitiveInput aria-label="API token" defaultValue="sb_live_2f9a41c7" copyable mono />
```
## Examples
### In a Field
Masked until the eye button is pressed. The label and description are wired by Field.
```tsx
<Field label="API token" description="Shown once. Store it somewhere safe.">
  <SensitiveInput defaultValue="sb_live_2f9a41c7" mono />
</Field>
```
### Copyable
The copy button copies the real value even while it is masked.
```tsx
<Field label="Webhook secret">
  <SensitiveInput defaultValue="whsec_robin_8d31" mono copyable />
</Field>
```
### Revealed

```tsx
<Field label="Deploy key">
  <SensitiveInput defaultValue="sb_deploy_wren_c04e" defaultRevealed mono copyable />
</Field>
```
### Error

```tsx
<Field label="Password" error="Use at least 12 characters.">
  <SensitiveInput defaultValue="hunter2" autoComplete="new-password" />
</Field>
```
### Disabled

```tsx
<Field label="API token">
  <SensitiveInput defaultValue="sb_live_2f9a41c7" mono disabled />
</Field>
```
## Props
### SensitiveInputProps
Also takes every prop of `Omit<InputProps, "type">`.
| Prop | Type | Description |
| --- | --- | --- |
| copyable? | `boolean` | Shows a copy button. It copies the real value even while it is masked. Default `false`. |
| defaultRevealed? | `boolean` | Starts revealed. Default `false`. |
| revealLabel? | `string` | Accessible names of the two buttons. Default `Show value`. |
| hideLabel? | `string` | Accessible name of the hide button. Default "Hide value". |
| copyLabel? | `string` | Accessible name of the copy button. Default "Copy value". |
| trailing? | `ReactNode` | Extra buttons or text after the built-in ones. |
| className? | `string` | Classes merged onto the root element, after ikada's own. |
| style? | `CSSProperties \| ((state: InputState) => CSSProperties)` | Style applied to the element, or a function that returns a style object based on the component's state. |
| render? | `ReactElement<unknown, string \| JSXElementConstructor<any>> \| ComponentRenderFn<HTMLProps, InputState>` | Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render. |
| invalid? | `boolean` | Marks the field invalid: danger ring and aria-invalid. Prefer the Field error. |
| mono? | `boolean` | Monospace face for ids, keys and hashes. |
Source: https://github.com/baronunread/ikada/blob/main/src/components/sensitive-input.tsx