Inputs

TextField

Styled text input with label, helper text, error state and leading and trailing slots.

<script>
  import { TextField } from "@codeatlasdev/ui";
  let email = $state("");
</script>

<TextField label="Email" type="email" bind:value={email} />

An error replaces the description and is announced to assistive tech. On touch devices the input text stays at 16px or more so iOS Safari does not zoom on focus. Wrapper components such as MaskedField, MoneyInput and PhoneField forward these props to TextField.

Default

Basic text inputs with a label.

Full name

Code

<script lang="ts">
  import { TextField } from '@codeatlasdev/ui';

  let name = $state('');
  let email = $state('');
</script>

<div class="col">
  <TextField label="Full name" placeholder="Jane Smith" bind:value={name} />
  <TextField label="Email" placeholder="you@example.com" type="email" bind:value={email} />
</div>

<style>
  .col {
    display: flex;
    flex-direction: column;
    gap: var(--ca-space-4);
    width: 100%;
    max-width: 400px;
  }
</style>

With icons

leading and trailing snippets. Interactive trailing content, like a reveal button, must be a real button with its own label.

Password

Code

<script lang="ts">
  import { TextField } from '@codeatlasdev/ui';
  import { Eye, EyeOff, Search } from '@lucide/svelte';

  let reveal = $state(false);
  let password = $state('');
</script>

<div class="col">
  <TextField label="Search" placeholder="Type to search…">
    {#snippet leading()}<Search size={16} stroke-width={2} />{/snippet}
  </TextField>
  <TextField label="Password" type={reveal ? 'text' : 'password'} placeholder="••••••••" bind:value={password}>
    {#snippet trailing()}
      <button type="button" class="reveal" aria-label={reveal ? 'Hide password' : 'Show password'} aria-pressed={reveal} onclick={() => (reveal = !reveal)}>
        {#if reveal}<EyeOff size={16} stroke-width={2} />{:else}<Eye size={16} stroke-width={2} />{/if}
      </button>
    {/snippet}
  </TextField>
</div>

<style>
  .col {
    display: flex;
    flex-direction: column;
    gap: var(--ca-space-4);
    width: 100%;
    max-width: 400px;
  }

  .reveal {
    display: inline-flex;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    cursor: pointer;
  }
</style>

States

Helper text, error, required, read-only, disabled and the small size.

Username

3–20 characters, letters and underscores only.

Please enter a valid email address.

Company

Read-only field

Disabled field

Small

Code

<script lang="ts">
  import { TextField } from '@codeatlasdev/ui';

  let wrong = $state('wrong@');
</script>

<div class="col">
  <TextField label="Username" placeholder="john_doe" description="3–20 characters, letters and underscores only." />
  <TextField label="Email" bind:value={wrong} error="Please enter a valid email address." />
  <TextField label="Company" required />
  <TextField label="Read-only field" value="Cannot edit this" readonly />
  <TextField label="Disabled field" value="Cannot edit this" disabled />
  <TextField label="Small" size="sm" placeholder="Compact height" />
</div>

<style>
  .col {
    display: flex;
    flex-direction: column;
    gap: var(--ca-space-4);
    width: 100%;
    max-width: 400px;
  }
</style>

Props

Prop	Type	Default	Description
`label`	`string`	–	Label text.
`placeholder`	`string`	`''`	Input placeholder.
`value`	`string`	`''`	Bindable input value.
`type`	`string`	`'text'`	HTML input type.
`error`	`string`	–	Validation error message. Puts the field in the error state.
`description`	`string`	–	Non-error hint shown below the field.
`helperText`	`string`	–	Deprecated alias of description.
`disabled`	`boolean`	`false`	Disables the input.
`required`	`boolean`	`false`	Marks the field as required.
`readonly`	`boolean`	`false`	Makes the input read-only.
`autocomplete`	`HTMLInputAttributes['autocomplete']`	–	Native autocomplete hint.
`name`	`string`	–	Native name, for form submission.
`size`	`'sm' \| 'md'`	`'md'`	Field height.
`leading`	`Snippet`	–	Icon or element before the input.
`trailing`	`Snippet`	–	Icon or element after the input.
`class`	`string`	–	Extra classes on the root.
`oninput`	`(value: string) => void`	–	Called on every keystroke with the new value.
`onchange`	`(value: string) => void`	–	Called when the value is committed (blur or Enter).
`onblur`	`(e: FocusEvent) => void`	–	Called when the input loses focus.