DryUI — Human-led, agent-assisted UI

Verification code

Accessibility

Styled quick start

Copy this entrypoint first. It includes the imports required to get the component on screen.

svelte

<script lang="ts">
  import '@dryui/ui/themes/default.css';
  import '@dryui/ui/themes/dark.css';
  import { PinInput } from '@dryui/ui';
</script>

<PinInput.Root bind:value={pin} length={6} oncomplete={handleVerify}>
  {#snippet children({ cells })}
    <PinInput.Group>
      {#each cells.slice(0, 3) as cell}
        <PinInput.Cell {cell} />
      {/each}
    </PinInput.Group>
    <PinInput.Separator />
    <PinInput.Group>
      {#each cells.slice(3) as cell}
        <PinInput.Cell {cell} />
      {/each}
    </PinInput.Group>
  {/snippet}
</PinInput.Root>

Import options

Root package

import { PinInput } from '@dryui/ui'

Per-component subpath

import { PinInput } from '@dryui/ui/pin-input'

API

Props, CSS variables, and the public data attributes you can target when styling.

Prop	Type	Description	Default	Required	Bindable
PinInput.Root
size	smmdlg	Size preset affecting density, spacing, or typography.	'md'	—	—
variant	outlineflushed	Visual style preset for the component.	'outline'	—	—
value	string	Current controlled or bindable value.	''	—	✓
length	number	—	4	—	—
mask	boolean	—	false	—	—
type	numericalphanumeric	HTML type attribute or component-specific type selector.	'numeric'	—	—
pattern	RegExp	—	—	—	—
placeholder	string	Hint text shown when no value is selected or entered.	'○'	—	—
disabled	boolean	Prevents interaction and applies disabled styling.	false	—	—
oncomplete	(value: string) => void	—	—	—	—
pasteTransformer	(text: string) => string	—	—	—	—
blurOnComplete	boolean	—	false	—	—
name	string	Field name used during native form submission.	—	—	—
children	Snippet<[{ cells: PinInputCellState[] }]>	Content rendered inside the component.	—	—	—
PinInput.Group
children	Snippet	Content rendered inside the component.	—	✓	—
PinInput.Cell
cell	PinInputCellState	—	—	✓	—
children	Snippet<[{ char: string \| null; isActive: boolean; hasFakeCaret: boolean }]>	Content rendered inside the component.	—	—	—
PinInput.Separator
children	Snippet	Content rendered inside the component.	—	—	—