Inline form

Pairs one field with an embedded submit action. The button appears after validation.

Preview

In action

List

Press notes

One field, one action, inside the same hairline.

When to use

Use it for

One value and one action: newsletter, invite by e-mail, join a waitlist.
validate to decide when the action appears; the default is a loose e-mail check.

Not for

More than one field; use Form with Field.
Actions with side effects that need confirmation; the success state is immediate.

Install

Three ways in. They share one source, so the pixels match whichever you pick.

1. Import the package

npm install @noorddev/vlak-react

// once, next to your app's root
import "@noorddev/vlak-react/css";

import { InlineForm } from "@noorddev/vlak-react";

Precompiled React and one stylesheet. No compiler to configure. Per-component imports work too: @noorddev/vlak-react/components/inline-form.

2. Vendor the source

npx @noorddev/vlak-cli add inline-form

The StyleX leaf lands in components/vlak/ with its dependencies, for your own compiler to own. See StyleX.

3. Through shadcn

npx shadcn add https://vlak.dev/r/inline-form.json

The same registry item, installed by shadcn's CLI.

CSS only

<link rel="stylesheet" href="node_modules/@noorddev/vlak/css/vlak.css" />

No React. Link vlak.css and use the markup and classes below.

React

import { InlineForm } from "@noorddev/vlak-react";

<InlineForm
  placeholder="Your e-mail"
  buttonLabel="Subscribe"
  inputProps={{ "aria-label": "E-mail", type: "email" }}
  onSubmit={(email) => subscribe(email)}
/>

Props

InlineForm

One field, one action; the action sits inside the field.

Prop	Type	Default	Description
`placeholder`	`string`	`"Your e-mail"`
`buttonLabel`	`ReactNode`	`"Subscribe"`
`successLabel`	`ReactNode`	`"You're on the list"`
`validate`	`(value: string) => boolean`	`(v) => /.+@.+\..+/.test(v)`	The action only appears once this returns true. Defaults to a loose e-mail check.
`onSubmit`	`(value: string) => void`
`inputProps`	`InputHTMLAttributes<HTMLInputElement>`

Also accepts Omit<FormHTMLAttributes<HTMLFormElement>, "onSubmit">.

Keyboard

Keys	Does
`Enter`	Submits once the value validates
`Tab`	Reaches the button only after the value validates

Accessibility

The input has a placeholder only; pass inputProps={{ "aria-label": … }} to name it.
The submit button stays out of the tab order (tabIndex -1) until validate returns true.
After submit the form is replaced by the successLabel text and a check mark.

Markup

<div class="rs-inline-field"><input class="rs-inline-input" placeholder="Your e-mail" /><span class="rs-reveal rs-reveal-in"><button class="rs-btn-primary rs-inline-btn">Subscribe</button></span></div>

Classes

.rs-inline-field.rs-inline-input.rs-inline-btn.rs-reveal.rs-reveal-in.rs-subscribed.rs-inline-field-btn

Depends on

/button