StellarUI

<stellar-text-field>

Properties

Preview

Markup

Copy

<stellar-text-field
  label="Email"
  description="We'll never share it."
  placeholder="Type here"
>
  <span slot="start">Path</span>
  <stellar-badge slot="end" tone="neutral" appearance="soft" size="xs">Optional</stellar-badge>
</stellar-text-field>

API

Complete props, events, slots, and implementation notes for the shipped text field.

Props

Prop	Type	Default
`tone`	`neutral \| primary \| secondary \| tertiary \| error`	`neutral`
`appearance`	`default \| ghost`	`default`
`size`	`xs \| sm \| md \| lg \| xl`	`md`
`state`	`'' \| disabled`	`''`
`label`	`string`	`''`
`description`	`string`	`''`
`error`	`string`	`''`
`type`	`text \| email \| password \| number \| date \| url \| search`	`text`
`value`	`string`	`''`
`placeholder`	`string`	`''`
`start`	`string`	`''`
`end`	`string`	`''`

Events

Event	Source	Notes
`input` / `change`	native	Bubbled from the inner native `<input>`.
`focus` / `blur`	native	Use normal DOM listeners on the custom element.
custom events	none	`stellar-text-field` does not emit custom events.

Slots

Slot	Notes
`label`	Optional content above the field. Overrides the `label` prop when present.
`description`	Optional helper content below the field. Overrides the `description` prop when present.
`error`	Optional validation message below the field. It replaces `description` while the inner control is invalid.
`start`	Optional leading content inside the field, such as text, icons, or a shortcut hint.
`end`	Optional trailing content inside the field, such as a badge or helper label.

Notes

The public tag is `stellar-text-field`, backed by a real native `<input>` inside a light wrapper.
The shipped API is `tone`, `appearance`, `size`, `state`, `label`, `description`, `type`, `value`, `placeholder`, `start`, and `end`, plus `label`, `description`, `start`, and `end` slots.
`start` and `end` are built-in icon props, while authored `slot="start"` and `slot="end"` content takes priority when present.
`required`, `readonly`, `minlength`, `maxlength`, `pattern`, `min`, `max`, `step`, `aria-invalid`, and `custom-validity` pass through to the inner native input for validation-sensitive flows.
The host now exposes `setCustomValidity()`, `checkValidity()`, `reportValidity()`, `validity`, `validationMessage`, and `willValidate`, so app code can treat `stellar-text-field` like a native input.
For Datastar, prefer `data-attr:custom-validity="..."` on the custom element host instead of the Pro-only `data-custom-validity` attribute.
The docs page uses the shared Datastar playground pattern, so later form controls can reuse the same layout and API sections.
`stellar-text-field` uses `mode: 'open'`, so it can read exported `stellar.css` tokens directly while keeping its own field styling local.
The visual baseline follows the shipped input height, wrapper layout, ghost treatment, and colored border/focus behavior with direct Stellar token mapping.