TextInput

TextInput lets you create accessible text-based inputs like text, email, search and password with a simple API.

Really simple markup

TextInput has possibly the simplest markup you’ll ever for a form input field. The minimum you need is just name and label.

<TextInput name="name" label="First Name" />

First Name

Add hint text and error messages — even both!

Just use the hint and error properties to add them.

<TextInput
  name="email"
  type="email"
  label="Email address"
  hint="Use an email you use, kay?"
/>

<TextInput
  name="email"
  type="email"
  label="Email address"
  error="Email already taken"
/>

Hint only

Email address

Use an email you use, kay?

Error only

Email address Email already taken

Both hint and error!

Email address

Use an email you use, kay?

Email already taken

Built with accessibility in mind

Both hint texts and error messages are linked to the <input> with aria-describedby.

The error message even has a live region attached so screen readers read error messages when they appear.

<TextInput
  name="email"
  type="email"
  label="Email address"
  hint="Use an email you use, kay?"
  error="Email already taken"
/>

<div class="TextField TextInput">
  <label for="email-id" class="Label"> Label </label>
  <div id="email-hint" class="Hint">Hint</div>
  <output id="email-error" for="email-id" class="Error"> Error </output>
  <div class="InputGroup">
    <input
      id="email-id"
      name="email"
      type="email"
      aria-describedby="email-hint email-error"
    />
  </div>
</div>

Give this a try!

Add items before or after the input field easily

Just use the before or after slots. Easy peasy.

<!-- Before slot -->
<TextInput name="x-handle" label="X Username">
  <span slot="before">@</span>
</TextInput>

<!-- After slot -->
<TextInput name="search" label="Search" placeholder="Find anything...">
  <button slot="after">
    <SVG icon="tabler:search" />
  </button>
</TextInput>

Before slot

X Username

After slot

We get all the tiny details right too. Try it out: Focus on the search input, then focus the search button.

You’ll see a nice-looking outline in both cases — and the outline is never includes the divider!

Make elements float on the input field

This is easy too. Just add the Stack attribute and adjust the input field to create sufficient padding, so the input doesn’t get covered by the overlapping element.

<TextInput
  Stack
  fieldClass="p-4 pr-28"
  type="email"
  name="email"
  label="Email"
  placeholder="Your email address"
>
  <button class="mr-2" slot="after"> Sign Up </button>
</TextInput>

Oh yeah, try focusing on these ones too! The focus details is done right as well.

Basic Usage

TextInput creates an text-based input element. The required properties are: name and label.

<script>
  import { TextInput } from '@splendidlabz/svelte'
</script>

<TextInput name="name" label="First Name"/>

Type

TextInput creates an input with type="text" by default. You can change the type by adding a type property. The following types are supported at this point:

text
email
search
password
url

<TextInput
  type="password"
  name="password"
  label="Password"
/>

Hint Text

You can create hint text for each TextInput by adding a hint property.

<TextInput
  name="nickname"
  label="Nickname"
  hint="Go wild with your nickname!"
/>

Error Messages

You can create error messages for each TextInput by adding an error property.

<TextInput
  name="username"
  label="Username"
  error="Username has been taken."
/>

Default value

Use the value property to set a default value.

<TextInput
  name="fav-pokemon"
  label="Favourite Pokemon"
  value="Pikachu"
/>

Placeholders

Use the placeholder property to add a placeholder.

<TextInput
  name="username"
  label="Username"
  placeholder="Superman"
/>

Readonly and Disabled states

Use readonly and disabled respectively to create and readonly and disabled states. These two states have a similar style (greyed out) but different behavior:

readonly will send data to the server when the form is submitted
disabled will not send data to the server when the form is submitted.

<!-- Readonly -->
<TextInput name="readonly" label="Disabled Input" readonly />

<!-- Disabled -->
<TextInput name="disabled" label="Readonly Input" disabled />

Other attributes

All other attributes will be added directly to the input element.

InputGroup and slots

TextInput contains two slots: before and after.

before lets you create a prefix for the input
after lets you create a suffix for the input

<!-- Before slot -->
<TextInput name="x-handle" label="X Username">
  <div slot="before">@</div>
</TextInput>

<!-- After slot -->
<TextInput name="search" label="Search" placeholder="Find anything...">
  <button slot="after">
    <SVG icon="tabler:search" />
  </button>
</TextInput>

Stacked Items

If you want before and after slot items to appear stacked above the input, you can use the Stack prop.

When you do this:

TextInput will not create a divider between items.
You also need to adjust padding of the input yourself by styling the input Field. (See styling).

<!-- Before slot -->
<TextInput
  Stack
  fieldClass="pl-8"
  name="x-handle"
  label="X Username"
>
  <div slot="before">@</div>
</TextInput>

<!-- After slot -->
<TextInput
  Stack
  fieldClass="p-4 pr-28"
  name="email" label="Email"
  placeholder="Your email address"
>
  <button class="mr-2" slot="after"> Sign Up </button>
</TextInput>

Binding and Event Listeners

Note

The contents of this section will only work in a .svelte file and not inside an .astro file.

Binding

You can bind to the <input> element with ref. This is useful if you need the element when handling events.

<script>
  let inputRef = null
</script>

<TextInput ref={inputRef}>

Events

The following events are supported by TextInput right now:

input
change
focus
blur
keydown
keyup
keypress
click

You can listen to these the way Svelte handles event listeners.

<script>
  function handleInput(event) {
    console.log(event.target.value)
  }
</script>

<TextInput on:input={handleInput}>

Note

We forward the above events manually because Svelte 4 doesn’t have automatic event-forwarding capability. All events will be forwarded automatically when we migrate to Svelte 5.

Please login to view this content

Splendid Labz is free because we love developers and we want to contribute back to the ecosystem.

We only charge for access to the documentation to keep the project going. If you don't wish to pay, feel free to use the content from the features tab, our blogs or our videos as your guide.

Basic Styles

TextInput uses several styles from both Splendid Styles and Splendid Layouts. The easiest way to include all basic styles is to import all styles from both libraries:

// styles.scss
@use '@splendidlabz/layouts';
@use '@splendidlabz/styles';

/* styles.css */
@import '@splendidlabz/layouts';
@import '@splendidlabz/styles';

But if you wish to include only the necessary styles for TextInput, you can use the following rules:

// styles.scss
@use '@splendidlabz/styles/Forms/FormBase';
@use '@splendidlabz/styles/Forms/TextField';
@use '@splendidlabz/layouts/Layouts/Micro/Divider';
@use '@splendidlabz/layouts/Layouts/Micro/Stack';

/* styles.css */
@import '@splendidlabz/styles/Forms/FormBase';
@import '@splendidlabz/styles/Forms/TextField';
@import '@splendidlabz/layouts/css/Layouts/Micro/Divider';
@import '@splendidlabz/layouts/css/Layouts/Micro/Stack';

HTML Output

Basic

TextInput creates the following HTML when label and name are used:

<div class="TextField TextInput">
  <label class="Label" for="name-id">Label</label>
  <div class="InputGroup">
    <input id="name-id" name="name" type="text" />
  </div>
</div>

With Hint

If hint is added, TextInput creates an additional Hint element and adds links the Hint element to the <input> with aria-describedby.

<div class="TextField TextInput">
  <label class="Label" for="name-id">Label</label>
  <div id="name-hint" class="Hint">Hint</div>
  <div class="InputGroup">
    <input id="name-id" name="name" type="text" aria-describedby="name-hint" />
  </div>
</div>

With Error

If error is added, TextInput creates an additional Error element (using <output>). It also links the error element to the <input> with aria-describedby:

<div class="TextField TextInput">
  <label class="Label" for="name-id">Label</label>
  <output id="name-error" class="Error" for="name-id">Error</output>
  <div class="InputGroup">
    <input id="name-id" name="name" type="text" aria-describedby="name-error" />
  </div>
</div>

With Hint and Error

If both hint and error are added, TextInput creates both hint and error elements, and links them both to the <input> with aria-describedby:

<div class="TextField TextInput">
  <label class="Label" for="name-id">Label</label>
  <output id="name-error" class="Error" for="name-id">Error</output>
  <div class="InputGroup">
    <input
      id="name-id"
      name="name"
      type="text"
      aria-describedby="name-hint name-error"
    />
  </div>
</div>

Before and After slots, no stack

If you added before or after slots, TextInput will create these elements inside InputGroup, before or after the <input> element.

If Stack is not added, TextInput will create a Divider element between the <input> and the slotted items.

<!-- Without Stack -->
<div class="TextField TextInput">
  <label class="Label" for="name-id">Label</label>
  <div class="InputGroup">
    <!-- Before slot -->
    <div slot="before">Before Slot Content</div>
    <div class="Divider-vertical"></div>

    <input id="name-id" name="name" type="text" aria-describedby="name-error" />

    <!-- After slot -->
    <div class="Divider-vertical"></div>
    <div slot="after">After Slot Content</div>
  </div>
</div>

Before and After slots, with stack

If Stack is added, TextInput will not create the divider element.

<!-- With Stack -->
<div class="TextField TextInput">
  <label class="Label" for="name-id">Label</label>
  <div class="InputGroup Stack">
    <div slot="before">Before Slot Content</div>
    <input id="name-id" name="name" type="text" aria-describedby="name-error" />
    <div slot="after">After Slot Content</div>
  </div>
</div>

Properties and Classes

The following properties can be used to add classes to TextInput.

Property	Description
`class`	Class for the `TextInput`
`styles`	Inline styles for the `TextInput`
`labelClass`	Class for the label
`hintClass`	Class for the hint element
`errorClass`	Class for the error element
`inputGroupclass`	Class for the input group
`fieldClass`	Class for the `<input>` field

All other custom properties will be passed directly into the <input> element.

Please login to view this content

Splendid Labz is free because we love developers and we want to contribute back to the ecosystem.

We only charge for access to the documentation to keep the project going. If you don't wish to pay, feel free to use the content from the features tab, our blogs or our videos as your guide.

Slots

Name	Description
`before`	Inserts HTML before `<input>`
`after`	Inserts HTML after `<input>`

Properties

Use these properties to customize the TextInput component.

Property	Type	Description
`name`	`string`	Name of the input field (required)
`label`	`string`	Label for the element
`hint`	`string`	Hint text
`error`	`string`	Error text
`value`	`string`	Input value
`placeholder`	`string`	Placeholder text
`disabled`	`boolean`	Adds the `disabled` state when present.
`readonly`	`boolean`	Adds the `readonly` state when present.
`required`	`boolean`	Adds the `required` state when present.
`ref`	`object`	Reference for the `<input>` element

Please login to view this content

Splendid Labz is free because we love developers and we want to contribute back to the ecosystem.

We only charge for access to the documentation to keep the project going. If you don't wish to pay, feel free to use the content from the features tab, our blogs or our videos as your guide.