Components / Input controls

Text Input

Component + manager

Builds an input (single or multi-line) with support for validations, placeholders, error messaging, toggling password visibility, optional popover editing, and more.

Preview

Usage

API reference

Live preview

Interactive example

Loading example…

Usage

Import the component and its manager, then make it your own.

ComponentTextInput

Managercreate_text_input_manager

svelte

<script>
  // Import the shared stylesheet once in your application's root layout.
  import "sveltekit-ui/style.css"
  import { TextInput, create_text_input_manager } from "sveltekit-ui"

  const manager = create_text_input_manager({
    label: "Email address",
    type: "email",
    name: "email",
    autocomplete: "email",
    placeholder: "you@example.com",
    is_required: true,
  })
</script>

<TextInput {manager} />
<p>Current value: {manager.val ?? ""}</p>

API reference

Configure the manager, call its methods, and read its reactive state.

42 entries in configuration

Property	Type	Default	Description
`type`	`string`	`text`	Determines the input field type. For multi-line input, specify `text_area`.
`val`	`any`	`null`	Starting value for the text field.
`label`	`string or null`	`null`	A text label displayed above or beside the input.
`aria_label`	`string or function`	`null`	Accessible name for an input or textarea without a visible label. Prefer a visible label when space allows.
`placeholder`	`string`	`varies by type`	The placeholder text for the input.
`name`	`string`	`text`	HTML input `name` attribute.
`autocomplete`	`string`	`varies by type`	HTML autocomplete attribute (e.g., `email`, `current-password`, `off`, etc.).
`is_required`	`boolean`	`false`	If true, the input must have a value.
`is_nullable`	`boolean`	`false`	If true, a Set Null button appears, allowing the value to become `null`.
`is_disabled`	`boolean`	`false`	If true, the input is not editable.
`error_message`	`string or null`	`null`	Displays an error message below the label if present.
`replace_spaces_with`	`string or null`	`null`	If set, replaces all spaces in input with this character/string.
`is_numbers_only`	`boolean`	`false`	If true, removes all non-digits from the user input.
`border_radius`	`number`	`1`	Applied as a rem value to style the input's rounded corners.
`ml`	`number`	`0`	Margin-left (rem).
`mr`	`number`	`0`	Margin-right (rem).
`mt`	`number`	`0`	Margin-top (rem).
`mb`	`number`	`0`	Margin-bottom (rem).
`max_length`	`number`	`100000`	Sets the maximum characters allowed in the input.
`min`	`number`	`-9007199254740990`	The minimum numeric value if `type` = 'number'.
`max`	`number`	`9007199254740990`	The maximum numeric value if `type` = 'number'.
`is_show_limit`	`boolean`	`false`	If true, shows `length/max_length` at the bottom-right of the input.
`password_min_length`	`number`	`7`	Minimum password length if `type = 'password'`.
`is_password_requires_lowercase`	`boolean`	`true`	Requires at least one lowercase letter for password validation.
`is_password_requires_uppercase`	`boolean`	`false`	Requires at least one uppercase letter for password validation.
`is_password_requires_number`	`boolean`	`false`	Requires at least one digit for password validation.
`is_password_requires_special_char`	`boolean`	`false`	Requires at least one special symbol for password validation.
`is_password_tooltip_used`	`boolean`	`true`	If true, shows a tooltip that describes password requirements.
`is_text_hidable`	`boolean`	`varies by type`	Toggles if we can show a hide/unhide button (e.g. for password).
`is_text_hidden`	`boolean`	`varies by type`	If true, text is hidden (type='password').
`is_preview_img`	`boolean`	`false`	If true, tries to display a small image from the typed URL (when `type='url'`).
`preview_img_size`	`number`	`32`	Size in px for the optional preview image if `is_preview_img` and type='url'.
`is_resizable`	`boolean`	`false`	If true and `type='text_area'`, user can resize the textarea.
`max_height`	`number`	`30`	Max height in rem for a textarea.
`rows`	`number`	`5`	Number of visible text lines if `type='text_area'`.
`is_popover`	`boolean`	`false`	If true, renders inside a popover for editing. Otherwise, it's displayed inline.
`popover_header`	`string or null`	`null`	When `is_popover=true`, sets the popover's header text.
`update_button_text`	`string or null`	`null`	If set, changes the popover's final button text from 'Finish' to a custom label.
`is_popover_edit_content`	`boolean`	`false`	If true, displays the label/value inline, with a small edit button that opens the popover. Otherwise, the input is always visible inline or in the popover.
`on_change`	`function or null`	`—`	Callback triggered on each input event, receiving the updated value.
`on_blur`	`function or null`	`—`	Callback triggered on input blur.
`on_finish`	`function or null`	`—`	If `is_popover=true`, called when pressing the final button in the popover. Receives the current value. Return `{ is_success: boolean, message?: string }` for success or error feedback.