Recipe

Edit form

A focused edit form for short notes, helper copy, and one primary action.

Preview

Publish note

Prepare the update before it reaches the team feed.

TitleSummaryKeep the note under 240 characters.

Ingredients

The recipe only uses documented Axie primitives.

CardFieldInputTextareaButton

Accessibility

Keep textarea labels persistent so users do not lose context after typing.
Use helper text for format expectations and errors for validation, not placeholders alone.
Place the primary action after the form fields in DOM order.

Code

code

<Card variant="outline">  <CardHeader>    <CardTitle>Publish note</CardTitle>    <CardDescription>Prepare the update before it reaches the team feed.</CardDescription>  </CardHeader>  <CardContent className="grid gap-4">    <Field label="Title"><Input defaultValue="Policy review" /></Field>    <Field label="Summary" helper="Keep the note under 240 characters.">      <Textarea defaultValue="Thresholds changed for partner accounts." />    </Field>    <Button>Publish note</Button>  </CardContent></Card>