Form

Fields stacked on the grid; one primary action at the end.

Send

Install

npx @noordvc/raster-cli add form

Markup

<form class="rs-form"><div class="rs-field"><span class="rs-field-label">Name</span><input class="rs-input rs-input-full" /></div><div class="rs-field"><span class="rs-field-label">E-mail</span><input class="rs-input rs-input-full" /></div><button class="rs-btn-primary">Send</button></form>

React

import { Form } from "@/components/raster/form";
import { Field, FieldLabel } from "@/components/raster/field";
import { Button } from "@/components/raster/button";

<Form onSubmit={save}>
  <Field>
    <FieldLabel htmlFor="name">Name</FieldLabel>
    <input id="name" className="rs-input rs-input-full" />
  </Field>
  <Button type="submit">Send</Button>
</Form>

Classes

.rs-form

Depends on

/field /input /button