Input

A labelled one-line text field with hint, error, icon, prefix and suffix.

Partner name

As it appears on invoices.

Minimum stake

€

Search games

Callback URL

Use an https:// address.

input.example.svelte

<script lang="ts">
  import { Input } from '@onlywin/ui-svelte';

  let stake = $state('0.20');
</script>

<div class="example-grid">
  <Input
    label="Partner name"
    placeholder="Kestrel Play"
    hint="As it appears on invoices."
  />
  <Input
    label="Minimum stake"
    bind:value={stake}
    inputmode="decimal"
    prefix="€"
  />
  <Input label="Search games" type="search" iconStart="search" />
  <Input
    label="Callback URL"
    type="url"
    value="http://"
    error="Use an https:// address."
  />
</div>

Usage

Do

Keep labels short and visible; use hint for format and units.
Say what is wrong and how to fix it in error.

Don’t

Do not use placeholder as the label.
Do not validate on every keystroke; validate on blur or submit.

Accessibility

The label is a real <label> for the input.
The hint, or the error when there is one, describes the input (aria-describedby); an error sets aria-invalid.

Keyboard

Input keyboard interactions
Keys	Action
`Tab, Shift+Tab`	Move focus in and out

Props

The same props in both frameworks. In React, class is className, events are camelCase (onClick), content passed as Svelte snippets is a ReactNode prop, every bindable value has a default… twin for uncontrolled use, and elementRef reaches the DOM element.

Input props
Prop	Type	Default	Description
`autocomplete`	`HTMLInputAttributes['autocomplete']`	—
`disabled`	`boolean`	`false`
`error`	`string`	—
`hint`	`string`	—
`iconStart`	`TUiIconName`	—
`id`	`string`	—
`inputmode`	`HTMLInputAttributes['inputmode']`	—
`label` *required	`string`	—
`name`	`string`	—
`onValueChange`	`(value: string) => void`	—
`optional`	`boolean`	`false`
`placeholder`	`string`	—
`prefix`	`string`	—
`required`	`boolean`	`false`
`size`	`'md' \| 'sm'`	`'md'`
`suffix`	`string`	—
`value`	`string`	`''`	Bindable in Svelte; `defaultValue` in React.