2f:I[967919,["/_next/static/immutable/chunks/1ghzvo2v3e9it.js","/_next/static/immutable/chunks/1ubf407bbesvn.js","/_next/static/immutable/chunks/2ru5l8aalwffo.js","/_next/static/immutable/chunks/2_pnkmjnqn60o.js","/_next/static/immutable/chunks/02zdfc_ck3rnv.js","/_next/static/immutable/chunks/3pcm9i84ehett.js","/_next/static/immutable/chunks/2kz55mtt4gg9-.js","/_next/static/immutable/chunks/2754p4i-zrjf8.js","/_next/static/immutable/chunks/0wc_90o59fis_.js","/_next/static/immutable/chunks/0v6d2j1fs6vdq.js","/_next/static/immutable/chunks/0d0omsdo6rngz.js","/_next/static/immutable/chunks/2go1j71-0poyv.js","/_next/static/immutable/chunks/14k-28a04j7wc.js","/_next/static/immutable/chunks/052z53e2-1wpg.js","/_next/static/immutable/chunks/3ovl2hhpccn0u.js","/_next/static/immutable/chunks/0r21vgnmwirm_.js","/_next/static/immutable/chunks/2lmq6h0csgx00.js"],"PreviewTabs"] 30:T7f4,"use client" import * as React from "react" import { toast } from "sonner" import { Button } from "@/components/ui/button" import { Field, FieldDescription, FieldError, FieldLabel } from "@/components/ui/field" import { Form } from "@/components/ui/form" import { Input } from "@/components/ui/input" import { Textarea } from "@/components/ui/textarea" type Errors = Partial> export default function FormDemo() { const [errors, setErrors] = React.useState({}) return (

{ e.preventDefault() const data = new FormData(e.currentTarget) const next: Errors = {} if (!String(data.get("name")).trim()) next.name = "Give the agent a name." const url = String(data.get("webhook")) if (url && !url.startsWith("https://")) next.webhook = "Webhooks must use https." setErrors(next) if (Object.keys(next).length === 0) toast("Agent created") }} > Name {errors.name} Instructions

</Field>
 <Field data-invalid={!!errors.webhook || undefined}>
 <FieldLabel htmlFor="form-webhook">Webhook</FieldLabel>
 <Input id="form-webhook" name="webhook" placeholder="https://…" aria-invalid={!!errors.webhook} />
 {errors.webhook ? (
 <FieldError>{errors.webhook}</FieldError>
 ) : (
 <FieldDescription>Called when a run finishes. Optional.</FieldDescription>
 )}
 </Field>
 <Button type="submit" className="self-start">
 Create agent
 </Button>
 </Form>
 )
}31:T7709,<pre class="shiki shiki-themes github-light vitesse-dark" style="--shiki-light:#24292e;--shiki-dark:#dbd7caee;--shiki-light-bg:#fff;--shiki-dark-bg:#121212" tabindex="0"><code>"use client"

import * as React from "react"
import { toast } from "sonner"

import { Button } from "@/components/ui/button"
import { Field, FieldDescription, FieldError, FieldLabel } from "@/components/ui/field"
import { Form } from "@/components/ui/form"
import { Input } from "@/components/ui/input"
import { Textarea } from "@/components/ui/textarea"

type Errors = Partial<Record<"name" | "webhook", string>>

export default function FormDemo() {
 const [errors, setErrors] = React.useState<Errors>({})

 return (
 <Form
 className="max-w-sm"
 onSubmit={(e) => {
 e.preventDefault()
 const data = new FormData(e.currentTarget)
 const next: Errors = {}
 if (!String(data.get("name")).trim()) next.name = "Give the agent a name."
 const url = String(data.get("webhook"))
 if (url && !url.startsWith("https://")) next.webhook = "Webhooks must use https."
 setErrors(next)
 if (Object.keys(next).length === 0) toast("Agent created")
 }}
 >
 <Field data-invalid={!!errors.name || undefined}>
 <FieldLabel htmlFor="form-name">Name</FieldLabel>
 <Input id="form-name" name="name" placeholder="Support agent" aria-invalid={!!errors.name} />
 <FieldError>{errors.name}</FieldError>
 </Field>
 <Field>
 <FieldLabel htmlFor="form-prompt">Instructions</FieldLabel>
 <Textarea id="form-prompt" name="prompt" placeholder="Be concise. Ask before refunds." />
 </Field>
 <Field data-invalid={!!errors.webhook || undefined}>
 <FieldLabel htmlFor="form-webhook">Webhook</FieldLabel>
 <Input id="form-webhook" name="webhook" placeholder="https://…" aria-invalid={!!errors.webhook} />
 {errors.webhook ? (
 <FieldError>{errors.webhook}</FieldError>
 ) : (
 <FieldDescription>Called when a run finishes. Optional.</FieldDescription>
 )}
 </Field>
 <Button type="submit" className="self-start">
 Create agent
 </Button>
 </Form>
 )
}</code></pre>28:["$","$L2f",null,{"name":"form-demo","code":"$30","html":"$31","align":"$undefined","className":"$undefined"}]
</article></body></html>

Form

Installation