SecretInput
A masked API key or token with a show/hide toggle and an optional copy button.
Examples
Token entry
A native password field: it masks and posts before hydration. Show and hide arrive with JavaScript.
Stored encrypted. Leave blank to keep the current token.
<Field id="api-token" label="API token" required hint="Stored encrypted. Leave blank to keep the current token.">
<SecretInput name="token" noun="token" placeholder="ghp_…" />
</Field>Copyable and invalid
Copyable for a token the person must copy now. The error comes from the Field.
Shown once. Copy it into your agent config now.
GitHub rejected this token. Create a new one with the repo scope and paste it here.
<Field id="new-token" label="Personal access token" hint="Shown once. Copy it into your agent config now.">
<SecretInput value={token} noun="token" copyable readOnly />
</Field>
<Field id="bearer-token" label="Bearer token" error="GitHub rejected this token. Create a new one with the repo scope and paste it here.">
<SecretInput name="bearer" value="ghp_expired0000" noun="token" />
</Field>Usage
import { SecretInput } from '@switchboard/ui'
<Field id="api-token" label="API token">
<SecretInput name="token" noun="token" />
</Field>Props
Every component also takes mix, for css() and mixins applied after its own style.
SecretInput
| Prop | Type | Default | Description |
|---|---|---|---|
| name | string | – | Form field name. |
| value | string | – | Initial value (defaultValue). |
| noun | string | 'value' | Used in the button names: "Show token", "Copy token". |
| copyable | boolean | – | Adds a copy button that copies the current text. |
| size | 'sm' | 'md' | 'lg' | 'md' | Height 28, 32 or 36px. |
| invalid | boolean | – | aria-invalid and a danger ring. Defaults to the Field error. |
| placeholder | string | – | Placeholder text. |
| autocomplete | string | 'off' | Set "new-password" or similar to involve password managers. |
| disabled | boolean | – | Disables the input and the buttons. |
| readOnly | boolean | – | Value can be revealed and copied but not edited. |
| required | boolean | – | Native required. |
| id | string | – | Overrides the Field id. |
| aria-label | string | – | Name when there is no Field. |
Uncontrolled: value is the initial text. Reads id, aria-describedby, invalid and required from a Field.
Accessibility
- The input is type="password" until revealed, so the value is masked and posts with the form before hydration.
- The reveal button is named "Show token" or "Hide token" from noun and reports its state with aria-pressed.
- Copy confirms with an announced "Copied to clipboard".
- Spellcheck and autocapitalise are off, so the browser does not alter or send the value to a spelling service.
Guidance
Do
- Set noun so the buttons say what they reveal: "Show token".
- Explain in the hint whether a blank field keeps or clears the saved secret.
Don’t
- Prefill a saved secret from the server; show that one is set and accept a new one.
- Use it for passwords people sign in with; that is a plain password Input with autocomplete.