Input for Svelte

One line for a single value, such as a username, an email, or a search.

Use it on a form when that value should not wrap. If the answer needs more than one line, use a Textarea. In Svelte, Ark UI styles that one-line field.

Installation

Anatomy

Usage

<script lang="ts">
import {
  Field, FieldDescription, FieldLabel,
} from "@/components/ui/field";
import { Input } from "@/components/ui/input";
</script>

<Field class="max-w-xs">
  <FieldLabel>API Key</FieldLabel>
  <Input placeholder="sk-..." type="password" />
  <FieldDescription>
    Your API key is encrypted and stored securely.
  </FieldDescription>
</Field>

Demos

Basic

A bare field, a placeholder, and no label. Use it when a heading already names the value, or you are about to supply your own label. Set type to the kind of text you expect, here plain text. A placeholder is not a name, so a real form should follow the Field demo instead of this one.

Field

Username, with the label above the field and a short note under it. Field connects that label to the control, and FieldDescription is the extra sentence, the one about choosing something unique. Leave the description off when the label is already clear. Do not make the placeholder do this job.

Field Group

Name, then email with a note about where updates go, then Reset and Submit on one row. FieldGroup is the gap between those blocks, so each field is not inventing its own margin. The button row sets orientation to horizontal. Reach for this when two or three fields share a submit and you do not need a select yet.

Disabled

The email cannot be edited, and the label and the note are muted with it. Set disabled on the input and on the Field. Skipping it on the field leaves the surrounding text at full strength, which looks like the box is still fair game. Use this for a value this screen should show but not change.

Invalid

The box, the label, and the note all pick up the error treatment together. invalid on Field styles the group, and aria-invalid on the input is what assistive tech hears. Put the reason in FieldDescription, in this case that the value failed validation. This stays on the page until the value is fixed.

File

A native file button labeled Picture, with a note to select a picture. type set to file is enough for one file and the browser picker. The label still matters, because the button's own text is generic. When people should drag files in, or you need a list of uploads, use File Upload.

Inline

A search field and a Search button on the same row. orientation set to horizontal on Field is what lines them up, and the button stays a sibling rather than sitting inside the input. Use it for a compact filter in a toolbar. A labeled form field usually wants the label above the control, which this layout gives up.

Grid

First name and last name, each with a label, in two columns. The grid is on FieldGroup, so the pair shares one row when the screen has room. Keep it to short values. On a narrow layout those columns get cramped, and a stacked group is the better shape.

Required

The label shows an asterisk, and the input sets required, so an empty submit is blocked by the browser. The star is only visual. The attribute is what actually enforces it. Use the description to say why the value is mandatory when that is not obvious from the label.

Badge

Webhook URL, with a Beta badge at the end of the label line. A Badge fits when the field is new or recommended and a second sentence would be too much. The input is a normal url field underneath. Keep the badge in the label, not inside the control, so the value itself stays clean.

Input Group

The website field shows https:// at the start and an info icon at the end, inside the same control. That composition is Input Group, using InputGroupInput for the part people type. Use it when a prefix, suffix, or icon is part of the value's shape. Do not absolutely position an icon over a plain input.

Button Group

The search text and a Search button share one outer border, so they read as a single control. Button Group is the join. Use it when the button acts on that field, such as search or submit. A prefix or an icon that sits inside the field belongs in an input group instead.

Form

Name, email, phone beside a country Select, an address, then Cancel and Submit. Copy this when several inputs share one submit, not when you have a single field. Phone uses type tel, and email uses email. The country list sits in the same two-column row so the line stays even.

Rtl

The API key field again, with dir set to rtl on the field and the input, and Arabic for the label, placeholder, and note. Logical spacing follows the reading direction, so you do not swap physical margins. Use this when a single field is Arabic or Hebrew inside an otherwise left-to-right page.

FAQ

API Reference