Input
Text input with size variants
Format: owner/repository. Case-sensitive.
Accessibility
- Pair Input with a visible Label or an aria-label so the field purpose is announced.
- Use native type, autocomplete, and name attributes for expected keyboard and form behavior.
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 { Input } from '@dryui/ui';
</script>
<Input type="email" bind:value={email} placeholder="[email protected]" />Import options
Root package
ts
import { Input } from '@dryui/ui'Per-component subpath
ts
import { Input } from '@dryui/ui/input'API
Props, CSS variables, and the public data attributes you can target when styling.
| Prop | Type | Description | Default | Required | Bindable |
|---|---|---|---|---|---|
| size | smmdlg | Input density preset for compact, default, or spacious form layouts. | 'md' | — | — |
| variant | defaultghost | Visual style preset for the component. | 'default' | — | — |
| value | string | Bindable text value for controlled input usage. | '' | — | ✓ |
| disabled | boolean | Prevents interaction and applies disabled styling. | false | — | — |
| type | string | Native input type such as text, email, password, or search. | — | — | — |