Input

A native input element that automatically works with Field.

Name

<script lang="ts">
	import { Input } from '@sveltery/base/input';
</script>

<label class="flex flex-col items-start gap-1 text-sm font-bold text-neutral-950 dark:text-white">
	Name
	<Input
		placeholder="e.g. Colm Tuite"
		class="h-8 w-40 border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 px-2 text-sm any-pointer-coarse:text-base font-normal text-neutral-950 dark:text-white placeholder:text-neutral-500 dark:placeholder:text-neutral-400 focus:outline-2 focus:-outline-offset-1 focus:outline-neutral-950 dark:focus:outline-white"
	/>
</label>

Usage guidelines

Form controls must have an accessible name: It can be created using a <label> element or the Field component. See the forms guide.

Anatomy

Import the component and use it as a single part:

Anatomy

<script lang="ts">
	import { Input } from '@sveltery/base/input';
</script>

<Input />

API reference

value string | number | null —

Name: value
Description: Current value. Use bind:value to share it with the parent.
Type: string | number | null
Binding: bind:value

defaultValue string | number | null —

Name: defaultValue
Description: The value an empty value starts from, as on an HTML input.
Type: string | number | null

onValueChange function —

Name: onValueChange
Description: Called when the user edits the control. eventDetails.cancel() vetoes the change.
Type: (value: string, eventDetails: FieldControlChangeEventDetails) => void

render Snippet<[props: HTMLAttributes<HTMLElement>, state: FieldControlState, children: Snippet | undefined]> —

Name: render
Description: Replace the default <input>. Spread props onto the host element.
Type: Snippet<[props: HTMLAttributes<HTMLElement>, state: FieldControlState, children: Snippet | undefined]>

disabled boolean

Name: disabled
Description: Whether the component should ignore user interaction.
Type: boolean

touched boolean

Name: touched
Description: Whether the field has been touched.
Type: boolean

dirty boolean

Name: dirty
Description: Whether the field value has changed from its initial value.
Type: boolean

valid boolean | null

Name: valid
Description: Whether the field is valid. null means validity is not known yet.
Type: boolean | null

filled boolean

Name: filled
Description: Whether the field has a value.
Type: boolean

focused boolean

Name: focused
Description: Whether the field is focused.
Type: boolean

data-disabled

Present when the input is disabled.

data-valid

Present when the input is in a valid state (when wrapped in Field.Root).

data-invalid

Present when the input is in an invalid state (when wrapped in Field.Root).

data-dirty

Present when the input's value has changed (when wrapped in Field.Root).

data-touched

Present when the input has been touched (when wrapped in Field.Root).

data-filled

Present when the input is filled (when wrapped in Field.Root).

data-focused

Present when the input is focused (when wrapped in Field.Root).

Attribute	Description	-
`data-disabled`	Present when the input is disabled.
`data-valid`	Present when the input is in a valid state (when wrapped in Field.Root).
`data-invalid`	Present when the input is in an invalid state (when wrapped in Field.Root).
`data-dirty`	Present when the input's value has changed (when wrapped in Field.Root).
`data-touched`	Present when the input has been touched (when wrapped in Field.Root).
`data-filled`	Present when the input is filled (when wrapped in Field.Root).
`data-focused`	Present when the input is focused (when wrapped in Field.Root).