sensitive-input

For API keys and passwords. It never prints a value, even when given one.

Example

Never printed back to the page.

Laravel

<x-admin::sensitive-input name="g_key" label="API key" stored hint="Never printed back to the page." />

Props

PropRequiredDefaultOptions
namenull
labelnull
hintnull
errornull
idnull
storedfalse
optionalfalse
requiredfalse

Other attributes, such as wire:model or data-*, pass through to the element.

Other stacks

React and Vue: import { SensitiveInput } from "@admiral/ui-kit/react" (or /vue). See the React and Vue guide.

HTML, for any stack
<div class="adm-field">
            <label class="adm-label" for="g_key">API key</label>
        <div class="adm-input-group">
        <input
            type="password"
            autocomplete="new-password"
            spellcheck="false"
             name="g_key"              id="g_key"              placeholder="Saved. Leave blank to keep it."                                      aria-describedby="g_key-hint"             class="adm-input"
        >
        <button type="button" class="adm-btn adm-btn--ghost adm-btn--square adm-btn--sm adm-input-group__action" data-adm-reveal aria-pressed="false" aria-label="Show value"><svg class="adm-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M2 12s3.6-7 10-7 10 7 10 7-3.6 7-10 7S2 12 2 12z"/><circle cx="12" cy="12" r="3"/></svg></button>
    </div>
    <span class="adm-hint" id="g_key-hint">Never printed back to the page.</span>    </div>