Skip to content

shadcn.io is an independent project built on shadcn/ui

Free

Success State Input for Svelte

A Username field filled with haydenbleasel, a success-colored border, and a fixed line that says the username is available.

UI library: Ark UI

Username is filled with haydenbleasel. The border is in the success color, and under the field a check sits beside Username is available. The message does not change as you type.

Use it only after your own check passes, such as a name that is free. A failure belongs on the Field as an error. In Svelte, Ark UI does not look the name up.

Preview

Preview width

Installation

MCP · Pro
Make your AI a shadcn expert
Your agent installs components, builds pages and restyles your app from one prompt, in Claude Code, Cursor or VS Code.
Get MCPSee plans
Part of Pro

Anatomy

Input anatomy: input, placeholder, value, caret

Usage

<Field class="w-full max-w-sm"><FieldLabel>Username</FieldLabel><Input class="border-success bg-background focus-visible:border-success focus-visible:ring-success/50" defaultValue="haydenbleasel" placeholder="johndoe" type="text" /><FieldDescription class="flex items-center gap-2 text-success"><CircleCheckIcon aria-hidden="true" class="size-4 shrink-0" />Username is available</FieldDescription></Field>

FAQ

How does the field turn green?

Classes on the input: border-success, plus focus-visible:border-success and focus-visible:ring-success/50 so the border and the ring stay green while it's focused.

Where does the green come from?

The theme's success color, the same token the other success states use, so it adapts to light and dark mode and to your theme.

How is the confirmation shown?

A FieldDescription with text-success, a CircleCheckIcon with aria-hidden and the text Username is available.

Is this a live availability check?

No. The value haydenbleasel and the message are fixed. Apply the classes and show the message when your own check passes.

Do screen readers hear the confirmation?

They reach it after the input in reading order. To announce it as soon as the check passes, render it in a region with aria-live polite.

How is Username tied to the field?

Clicking the label focuses the field, and screen readers announce it with the field. Field links FieldLabel to the input inside it, so there is no id to match.

API Reference

Field

No extra props in this demo. The rest is on the Field page.

Input

Sets defaultValue="haydenbleasel", placeholder="johndoe" and type="text". The rest is on the Input page.

All 24 input examples