Inline form

One field, one action. The action sits inside the field and appears once input validates.

Install

npx raster add inline-form

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>

React

import { InlineForm } from "@/components/raster/inline-form";

<InlineForm onSubmit={(email) => subscribe(email)} />

Classes

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

Depends on

/button