Textfield component

The kit:textfield component provides a versatile input solution for capturing user data. It supports various input types, validation states, and enhanced features like character counting and clearable functionality. Designed for i increase accessibility and user experience in mind in your interphase.

Instead of reinventing textfield logic, Lapikit Textfield enables you to focus on behavior and data flow.

kit:textfield wraps a native <input> inside a styled container. It uses a grid layout to slot prepend/append (outside the field) and prependInner/appendInner (inside the field border). The value prop is bindable.

Examples of textfield

Variants

Shows visual variants of the textfield: outlined, filled, or text to match different design systems and UI contexts.

filled (default): solid background.
outline: visible border.
text : transparent background.
variant: 'filled' | 'outline' | 'text' = 'filled'

message and error

Show helper text or validation errors below the field. The message is visible on focus unless persistentMessage is set.

message: string => Helper text shown below the field.
errorMessage: string => Message shown when error is true.
error: boolean => Activates the error state (red border + message).
persistentMessage: boolean => Always shows the message (not only on focus).
counter: string => Shows character count. Use with max for limit.
max: string => Maximum character count.

prependInner and appendInner

Place icons or buttons inside the field border using the prependInner and appendInner snippets.

prependInner: Snippet | undefined = undefined => Content inside the field, before the input.
appendInner: Snippet | undefined = undefined => Content inside the field, after the input.
prepend: Snippet | undefined = undefined => Content outside the field, before it.
append: Snippet | undefined = undefined => Content outside the field, after it.

clearable

Adds a clear button that appears when the field has a value.

clearable: boolean = false
persistentClear: boolean = false

Without preprocess Lapikit

If you aren’t using the Lapikit preprocessor in svelte.config.js, import the components directly:

API Reference

kit:textfield

props	type	description	default
value	`string \| number`	Input value. Bindable.
type	enum	Input type.	`'text'`
placeholder	`string`	Placeholder text.
variant	enum	Visual style.	`'filled'`
size	enum	Field size.	`'md'`
density	enum	Padding density.	`'default'`
rounded	enum	Border radius.	`'md'`
error	`boolean`	Activates error state.	`false`
errorMessage	`string`	Message shown when `error` is `true`.
message	`string`	Helper text below the field.
messagePrefix	`string`	Leading text in the message row.
messageSuffix	`string`	Trailing text in the message row.
persistentMessage	`boolean`	Always shows the message, not only on focus.	`false`
counter	`boolean`	Shows character counter.	`false`
min	`number`	Minimum character count.
max	`number`	Maximum character count.
clearable	`boolean`	Shows a clear button when the field has a value.	`false`
persistentClear	`boolean`	Always shows the clear button.	`false`
disabled	`boolean`	Disables the input.	`false`
readonly	`boolean`	Makes the input read-only.	`false`
hideSpinButtons	`boolean`	Hides the spin buttons on `type="number"` inputs.	`false`
prefix	`string`	Static text before the input value.
suffix	`string`	Static text after the input value.
name	`string`	Input `name` attribute.
id	`string`	Input `id` attribute.
autocomplete	`string`	Input `autocomplete` attribute.
inputmode	`string`	Input `inputmode` attribute.
color	`string`	Foreground color override (`--kit-textfield-fg`).
background	`string`	Background color override (`--kit-textfield-bg`).
prepend	`Snippet`	Content outside the field, before it.
append	`Snippet`	Content outside the field, after it.
prependInner	`Snippet`	Content inside the field border, before the input.
appendInner	`Snippet`	Content inside the field border, after the input.

kit:textfield works great with Form validation and can be enhanced with Icons and Buttons using snippets.