TextField

Usage

Bind the value and give it a label. The input receives every other attribute you pass, such as name, autocomplete, placeholder and events, while class and style apply to the whole field.

<script>
  import { TextField } from 'sveltier';
  let email = $state('');
</script>

<TextField
  label="Email"
  type="email"
  name="email"
  autocomplete="email"
  hint="Receipts go to this address"
  required
  bind:value={email}
/>

Validation

A field's message comes from three places, checked in this order:

1. The HTML constraints you already know: required, minlength, maxlength, pattern, and type="email" or "url". Their messages come from the locale, so they read the same in every browser and translate with your app.
2. rules: functions that return true or the message to show. They run in order and stop at the first message. Like the constraints, they skip an empty field that is not required.
3. error: a message from outside the field, usually the answer of your server. It shows at once, and it never stops the form from being submitted again.

A message appears when the user leaves a field they have changed, not while they tab through the form. Once it is shown, it follows every keystroke, so fixing the value clears it at once. Set validateOn to "input" to check from the first change, or to "submit" to wait for the form. Inside a plain <form>, the browser also refuses to submit an invalid field, with the same words.

<script>
  import { TextField } from 'sveltier';

  // The result of a SvelteKit form action, with the server's own errors.
  let { form } = $props();
  let username = $state('');

  const rules = [
    (value) => /^[a-z0-9_]+$/.test(value) || 'Use lowercase letters, digits and _',
    (value) => !value.startsWith('_') || 'Start with a letter or a digit'
  ];
</script>

<TextField
  label="Username"
  name="username"
  required
  minlength={3}
  maxlength={20}
  {rules}
  error={form?.errors?.username}
  bind:value={username}
/>

Variants

Fields take five of the shared variants: outlined (the default) draws a border, tonal a wash with a rule under it, elevated a raised surface for a field over an image, text only the rule, and plain nothing, for a field inside another component. color is the accent of the focused field; an invalid field turns to the error colour.

Size and density

A field is as tall as a Button of the same size and density, so they line up in a row. The label keeps the theme's label style at every size.

Icons and actions

prepend and append put content inside the box: an icon, a prefix, or a button. A press anywhere else in the box focuses the input.

<script>
  import { Button, Icon, TextField } from 'sveltier';
  let visible = $state(false);
</script>

<TextField label="Search" type="search" variant="elevated">
  {#snippet prepend()}<Icon path={SEARCH} />{/snippet}
</TextField>

<TextField label="Password" type={visible ? 'text' : 'password'} autocomplete="current-password">
  {#snippet append()}
    <Button variant="text" size="sm" onclick={() => (visible = !visible)}>
      {visible ? 'Hide' : 'Show'}
    </Button>
  {/snippet}
</TextField>

Accessibility

• The label is a <label> for the input. Without a visible label, name the input with aria-label.
• The hint, or the error in its place, describes the input, and an invalid field is marked aria-invalid. An aria-describedby of your own is kept alongside.
• An error that appears after the user has moved on is announced politely.
• required adds an asterisk that screen readers skip: the input already says it is required.
• Text is at least 16 px on touch screens, where smaller text makes iOS zoom into the page.

API