TextField and OutlinedTextField: Form Input Components

Compose Svelted ships two text field variants that match the Material 3 specification. TextField uses a filled surface with a bottom indicator line, and OutlinedTextField wraps the same internal BaseTextField with a full border. Both components are fully controlled — you own the value state and receive changes through onValueChange.

TextField

TextField is the filled-style input field. It renders a rounded container with a surfaceVariant background, a floating label that animates upward on focus or when the field has a value, and a bottom indicator line that shifts to the primary color when focused.

Props

value

string

default:"\"\""

The current text value of the field. TextField is a controlled component — bind this to a reactive variable and update it through onValueChange.

onValueChange

(v: string) => void

default:"(v) => {}"

Called every time the input value changes. Receives the new string value.

label

string

default:"\"\""

Floating label text. Renders at full size inside the field when empty/unfocused, and animates to a small label above the input when focused or filled.

placeholder

string

default:"\"\""

Placeholder text shown inside the input while the field is focused but empty.

enabled

boolean

default:"true"

When false, the field is visually dimmed and non-interactive.

isError

boolean

default:"false"

Activates the error state: the label, indicator line, and supporting text all switch to the error color token.

floatingLabelScale

number

default:"0.78"

Scale factor applied to the label when it floats to the top of the field. Defaults to 0.78 (78% of the original size).

singleLine

boolean

default:"true"

When true renders a single-line <input>; when false renders a multi-line <textarea>.

textStyle

TextStyleToken

default:"'bodyLarge'"

Typographic style applied to the input text. See the Text Style tokens reference.

modifier

Modifier

default:"Modifier.empty()"

Layout modifier applied to the outer field wrapper.

shape

Shape

default:"RoundedCornerShape(12)"

Corner radius of the field container. Defaults to RoundedCornerShape(12) (12 px all corners).

supportingText

string | undefined

default:"undefined"

Helper or error message rendered below the field. Uses error color when isError is true.

readOnly

boolean

default:"false"

When true, the field is visible and focusable but its value cannot be changed by the user.

density

DensityToken

default:"Density.Default"

Controls the vertical density of the field. Accepts Density.Default (56 px height) or Density.Compact (44 px height).

colors

TextFieldColors

default:"TextFieldDefaults.filledColors()"

Color configuration object for every visual element of the field. Defaults to TextFieldDefaults.filledColors(). See TextFieldDefaults for customisation.

Named slots

Slot	Description
`leadingIcon`	Content rendered to the left of the label/input area (e.g., a search icon).
`trailingIcon`	Content rendered to the right of the input area (e.g., a clear button).

Basic example

<script>
  import { TextField } from '@danielito1996/compose-svelted';

  let email = '';
</script>

<TextField
  value={email}
  onValueChange={(v) => email = v}
  label="Email"
  placeholder="[email protected]"
/>

Multi-line field

<script>
  import { TextField, Modifier } from '@danielito1996/compose-svelted';

  let bio = '';
</script>

<TextField
  value={bio}
  onValueChange={(v) => bio = v}
  label="Bio"
  placeholder="Tell us about yourself"
  singleLine={false}
  modifier={Modifier.fillMaxWidth()}
/>

Error state example

<script>
  import { TextField, Modifier } from '@danielito1996/compose-svelted';

  let password = '';
  $: isShort = password.length > 0 && password.length < 8;
</script>

<TextField
  value={password}
  onValueChange={(v) => password = v}
  label="Password"
  isError={isShort}
  supportingText={isShort ? 'Password must be at least 8 characters.' : undefined}
  modifier={Modifier.fillMaxWidth()}
/>

With leading and trailing icons

<script>
  import {
    TextField, Icon, Modifier,
    ColorScheme, painterResource, Res
  } from '@danielito1996/compose-svelted';

  let search = '';
</script>

<TextField
  value={search}
  onValueChange={(v) => search = v}
  label="Search"
  modifier={Modifier.fillMaxWidth()}
>
  <svelte:fragment slot="leadingIcon">
    <Icon
      painter={painterResource(Res.raw('search.svg'))}
      tint={ColorScheme.OnSurfaceVariant}
      modifier={Modifier.size(20)}
    />
  </svelte:fragment>
  <svelte:fragment slot="trailingIcon">
    <Icon
      painter={painterResource(Res.raw('close.svg'))}
      tint={ColorScheme.OnSurfaceVariant}
      modifier={Modifier.size(20)}
    />
  </svelte:fragment>
</TextField>

OutlinedTextField

OutlinedTextField wraps BaseTextField in a bordered <div> instead of using a filled surface. It uses transparent as the container background and a visible border that transitions between outline (unfocused) and primary (focused) color tokens.

Props

OutlinedTextField accepts the same props as TextField. The only behavioral difference is that it defaults to TextFieldDefaults.outlinedColors() and tracks focus internally to animate the border color.

value

string

default:"\"\""

Current text value (controlled).

onValueChange

(v: string) => void

default:"(v) => {}"

Value change callback.

label

string

default:"\"\""

Floating label text.

placeholder

string

default:"\"\""

Placeholder shown while focused and empty.

enabled

boolean

default:"true"

Interactive state.

isError

boolean

default:"false"

Error state — turns label, border, and supporting text to the error color.

readOnly

boolean

default:"false"

Read-only display mode.

singleLine

boolean

default:"true"

Single-line input vs. textarea.

floatingLabelScale

number

default:"0.78"

Floating label scale factor.

textStyle

TextStyleToken

default:"'bodyLarge'"

Input typography style.

modifier

Modifier

default:"Modifier.empty()"

Layout modifier applied to the outer bordered wrapper.

shape

Shape

default:"RoundedCornerShape(12)"

Corner radius of the border.

supportingText

string | undefined

default:"undefined"

Helper text below the field.

density

DensityToken

default:"Density.Default"

Vertical density of the field.

colors

TextFieldColors

default:"TextFieldDefaults.outlinedColors()"

Color configuration object. Defaults to TextFieldDefaults.outlinedColors().

Named slots

Slot	Description
`leadingIcon`	Leading icon slot.
`trailingIcon`	Trailing icon slot.

Basic example

<script>
  import { OutlinedTextField, Modifier } from '@danielito1996/compose-svelted';

  let username = '';
</script>

<OutlinedTextField
  value={username}
  onValueChange={(v) => username = v}
  label="Username"
  placeholder="@handle"
  modifier={Modifier.fillMaxWidth()}
/>

Error state

<script>
  import { OutlinedTextField, Modifier } from '@danielito1996/compose-svelted';

  let code = '';
  $: isInvalid = code.length > 0 && !/^\d{6}$/.test(code);
</script>

<OutlinedTextField
  value={code}
  onValueChange={(v) => code = v}
  label="Verification code"
  isError={isInvalid}
  supportingText={isInvalid ? 'Enter the 6-digit code from your email.' : undefined}
/>

TextFieldDefaults

TextFieldDefaults provides the default TextFieldColors objects for each field style. Call the appropriate factory method to get a sensible baseline and override individual color properties as needed.

`TextFieldDefaults.filledColors()`

Returns a TextFieldColors object configured for TextField:

Property	Resolved token
`container`	`surfaceVariant`
`label`	`onSurfaceVariant`
`placeholder`	`onSurfaceVariant`
`text`	`onSurface`
`cursor`	`primary`
`indicatorFocused`	`primary`
`indicatorUnfocused`	`onSurfaceVariant`
`error`	`error`

`TextFieldDefaults.outlinedColors()`

Returns a TextFieldColors object configured for OutlinedTextField:

Property	Resolved token
`container`	`transparent`
`label`	`onSurfaceVariant`
`placeholder`	`onSurfaceVariant`
`text`	`onSurface`
`cursor`	`primary`
`indicatorFocused`	`primary`
`indicatorUnfocused`	`outline`
`borderFocused`	`primary`
`borderUnfocused`	`outline`
`error`	`error`

TextFieldColors interface

interface TextFieldColors {
  container: string;
  label: string;
  placeholder: string;
  text: string;
  cursor: string;
  indicatorFocused: string;
  indicatorUnfocused: string;
  borderFocused?: string;   // OutlinedTextField only
  borderUnfocused?: string; // OutlinedTextField only
  error?: string;
}

Passing custom colors

Override individual properties by spreading the defaults:

<script>
  import {
    TextField, TextFieldDefaults
  } from '@danielito1996/compose-svelted';

  let name = '';

  const customColors = {
    ...TextFieldDefaults.filledColors(),
    container: '#1a1a2e',
    text: '#e0e0ff',
    label: '#9090cc',
    cursor: '#7c4dff',
    indicatorFocused: '#7c4dff',
  };
</script>

<TextField
  value={name}
  onValueChange={(v) => name = v}
  label="Name"
  colors={customColors}
/>

Density

DensityToken controls the vertical height of the field, which is useful in data-dense UIs such as tables or forms with many fields.

import { Density } from '@danielito1996/compose-svelted';

Density.Default  // "default" — 56px field height, 88px min multiline height
Density.Compact  // "compact" — 44px field height, 72px min multiline height

Compact density example

<script>
  import {
    Column, TextField, OutlinedTextField,
    Arrangement, Modifier, Density
  } from '@danielito1996/compose-svelted';

  let first = '';
  let last = '';
</script>

<Column
  modifier={Modifier.padding(16)}
  verticalArrangement={Arrangement.spacedBy(8)}
>
  <TextField
    value={first}
    onValueChange={(v) => first = v}
    label="First name"
    density={Density.Compact}
    modifier={Modifier.fillMaxWidth()}
  />
  <OutlinedTextField
    value={last}
    onValueChange={(v) => last = v}
    label="Last name"
    density={Density.Compact}
    modifier={Modifier.fillMaxWidth()}
  />
</Column>

Density.Comfortable is not currently defined in Density.ts. Only Density.Default and Density.Compact are available.

Get Started

Core Concepts

Layout Components

UI Components

Motion

Navigation

Examples

TextField and OutlinedTextField: Form Input Components

TextField

Props

Named slots

Basic example

Multi-line field

Error state example

With leading and trailing icons

OutlinedTextField

Props

Named slots

Basic example

Error state

TextFieldDefaults

`TextFieldDefaults.filledColors()`

`TextFieldDefaults.outlinedColors()`

TextFieldColors interface

Passing custom colors

Density

Compact density example

Build docs developers (and LLMs) love

Get Started

Core Concepts

Layout Components

UI Components

Motion

Navigation

Examples

Documentation Index

​TextField

​Props

​Named slots

​Basic example

​Multi-line field

​Error state example

​With leading and trailing icons

​OutlinedTextField

​Props

​Named slots

​Basic example

​Error state

​TextFieldDefaults

​TextFieldDefaults.filledColors()

​TextFieldDefaults.outlinedColors()

​TextFieldColors interface

​Passing custom colors

​Density

​Compact density example

Build docs developers (and LLMs) love

TextField

Props

Named slots

Basic example

Multi-line field

Error state example

With leading and trailing icons

OutlinedTextField

Props

Named slots

Basic example

Error state

TextFieldDefaults

`TextFieldDefaults.filledColors()`

`TextFieldDefaults.outlinedColors()`

TextFieldColors interface

Passing custom colors

Density

Compact density example