blackchalkv0.3.0
Components

Form

SketchForm — a hand-drawn form container that wraps inputs in a sketch card.

SketchForm wraps its children in a SketchCard with a vertical flex layout and calls onSubmit (with preventDefault already handled) when the form is submitted. Pair it with SketchFormField to label inputs and SketchButton to submit.

Default

import { SketchForm, SketchFormField, SketchInput, SketchButton } from "blackchalk";<SketchForm onSubmit={() => alert("Submitted")}><SketchFormField label="Name">  <SketchInput placeholder="Ada Lovelace" /></SketchFormField><SketchFormField label="Email">  <SketchInput placeholder="ada@example.com" /></SketchFormField><SketchButton variant="primary">Save</SketchButton></SketchForm>

Props

PropTypeDefault
childrenReactNode
onSubmit(e: FormEvent<HTMLFormElement>) => void

See it in the Storybook playground, or read the source.

On this page