Forms & inputs
LockInput
Focus state that "locks" into place
detent-lock-input
Port status
- Catalog status
- implemented
- Origin
- upstream
- Phase
- 3
- Wave
- phase-3-forms
- Group
- Forms & inputs
4.4 KB gzip for the class module
Variants
Recorded states
focus-visiblerecorded state; no setterdisabledrecorded state; no settererrorrecorded state; no setterdark themerecorded state; no setter
Usage
Import
import '/components/lock-input/define.js';
// or register it yourself
import { DetentLockInput } from '/components/lock-input/lock-input.js';Attributes
default-valuedescriptiondisablederrorlabelnameplaceholderrequiredtypevalue
Properties
valuedefaultValuelabeldescriptionerrorplaceholdertypedisabledrequiredname
Slots
left-iconright-icon
Events
detent-change— { value: string }
Example
Runnable example: site/examples/lock-input.ts. The snippet below is generated from the catalogued attributes.
<detent-lock-input
default-value
description
disabled
error
label
name
placeholder
required
type
value
></detent-lock-input>Source
The pinned upstream source for this row:
src/components/ui/LockInput.tsxsha256 e22f9b189e22…
Native files
The native module and its artifacts:
src/components/lock-input/lock-input.tssrc/components/lock-input/styles.csssrc/components/lock-input/define.tsdocs/components/lock-input.mdsite/examples/lock-input.tstests/browser/lock-input.spec.tsevidence/components/lock-input.md
API
Boolean attributes follow HTML presence semantics: present means true, absent means false, and disabled="false" still means disabled.
Attributes
| Attribute | Property | Type | Default | Notes |
|---|---|---|---|---|
default-value | — | — | — | Recorded in the catalog as an attribute. |
description | description | string | undefined | Kebab-case attribute; camelCase property. |
disabled | disabled | boolean | false | Presence semantics: present means true, absent means false. |
error | error | string | undefined | Kebab-case attribute; camelCase property. |
label | label | string | undefined | Kebab-case attribute; camelCase property. |
name | — | — | — | Recorded in the catalog as an attribute. |
placeholder | — | — | — | Recorded in the catalog as an attribute. |
required | — | — | — | Recorded in the catalog as an attribute. |
type | — | — | — | Recorded in the catalog as an attribute. |
value | — | — | — | Recorded in the catalog as an attribute. |
Properties
| Property | Type | Default | Notes |
|---|---|---|---|
value | — | — | Recorded in the catalog without a top-level type; pinned from source when the row is ported. |
defaultValue | — | — | Recorded in the catalog without a top-level type; pinned from source when the row is ported. |
label | string | undefined | Property-only: assign from script; not accepted as an attribute. |
description | string | undefined | Property-only: assign from script; not accepted as an attribute. |
error | string | undefined | Property-only: assign from script; not accepted as an attribute. |
placeholder | — | — | Recorded in the catalog without a top-level type; pinned from source when the row is ported. |
type | — | — | Recorded in the catalog without a top-level type; pinned from source when the row is ported. |
disabled | boolean | false | Property-only: assign from script; not accepted as an attribute. |
required | — | — | Recorded in the catalog without a top-level type; pinned from source when the row is ported. |
name | — | — | Recorded in the catalog without a top-level type; pinned from source when the row is ported. |
Events
| Event | Upstream prop | Payload type | Notes |
|---|---|---|---|
detent-change | onChange | (value: string) => void | Composed, bubbles; fires only for a user action. |
Slots
| Slot | Notes |
|---|---|
left-icon | Consumer content; rendered through a slot, never re-created. |
right-icon | Consumer content; rendered through a slot, never re-created. |
CSS customisation
- React `children`/`ReactNode` props become DOM slots; caller content stays light DOM.
- Framer Motion springs/AnimatePresence ported to CSS transitions, WAAPI or the shared rAF spring helper.
- React state/hooks replaced by element-owned state with pre-upgrade property preservation.
- The attribute label and string description/error render as text; icon nodes become slots.
- Native additions: name, value, default-value, type, placeholder, required, setFormValue/setValidity, checkValidity/reportValidity, reset/restore, fieldset detection.
- `detent-change` is a native addition: the row records no event, but the pinned source forwards onChange from InputHTMLAttributes.
- The description hides while an error is shown (upstream `description && !error`) and aria-describedby follows the visible node.
- Disabled mutates only the frame (upstream opacity-30 faded the label).
- The lock ring is CSS instead of springSnappy (PC-10.4), removed under reduced motion with the final state kept.
- Danger colours are color-mix values, not rose-500/50 on a dark-only surface.
What it does
A password field with a lock affordance and a reveal toggle, plus inline validation messaging.
Upstream behaviour
- Focus ring scales in from 0.94 to 1.0 with a snappy spring, producing a physical "lock" feel
- Inset border ring fades in alongside the outer focus halo for a layered lock effect
- Icon and label slots adjust contrast on focus to draw the eye inward
- Error state replaces accent with restrained rose and animates message in
- Light/dark theme aware via CSS variables — same code, both themes
Differences from upstream
- React `children`/`ReactNode` props become DOM slots; caller content stays light DOM.
- Framer Motion springs/AnimatePresence ported to CSS transitions, WAAPI or the shared rAF spring helper.
- React state/hooks replaced by element-owned state with pre-upgrade property preservation.
- The attribute label and string description/error render as text; icon nodes become slots.
- Native additions: name, value, default-value, type, placeholder, required, setFormValue/setValidity, checkValidity/reportValidity, reset/restore, fieldset detection.
- `detent-change` is a native addition: the row records no event, but the pinned source forwards onChange from InputHTMLAttributes.
- The description hides while an error is shown (upstream `description && !error`) and aria-describedby follows the visible node.
- Disabled mutates only the frame (upstream opacity-30 faded the label).
- The lock ring is CSS instead of springSnappy (PC-10.4), removed under reduced motion with the final state kept.
- Danger colours are color-mix values, not rose-500/50 on a dark-only surface.