2b:I[97408,["/_next/static/chunks/2mboumxmn9vsj.js","/_next/static/chunks/32dvni95tpg53.js","/_next/static/chunks/096pdj0p9us7b.js","/_next/static/chunks/2zmhim7fs4co6.js","/_next/static/chunks/3xch0q4i4r97l.js","/_next/static/chunks/0rrxkn5ubhu1j.js"],"StageProvider"] 2c:I[60401,["/_next/static/chunks/2mboumxmn9vsj.js","/_next/static/chunks/32dvni95tpg53.js","/_next/static/chunks/096pdj0p9us7b.js","/_next/static/chunks/2zmhim7fs4co6.js","/_next/static/chunks/3xch0q4i4r97l.js","/_next/static/chunks/0rrxkn5ubhu1j.js"],"DetailTabs"] 2d:Tf79,"use client"; import { MotionConfig, motion } from "motion/react"; import { CircleAlert, LoaderCircle } from "lucide-react"; import { Form as FormPrimitive } from "radix-ui"; import type { ComponentProps } from "react"; import { cn } from "@/lib/utils"; export const formControlClasses = cn( "block h-10 w-full rounded-xl bg-white px-3 text-sm text-neutral-950 outline-none transition-[box-shadow,background-color]", "shadow-[0_1px_2px_rgb(0_0_0/0.04)] ring-1 ring-inset ring-black/[0.1] placeholder:text-neutral-400 hover:ring-black/[0.16]", "focus:ring-2 focus:ring-neutral-950/25 data-[invalid]:ring-red-500/50 data-[invalid]:focus:ring-red-500/40", "disabled:cursor-not-allowed disabled:opacity-50", "dark:bg-white/[0.04] dark:text-white dark:shadow-none dark:ring-white/[0.12] dark:placeholder:text-neutral-500 dark:hover:ring-white/[0.2] dark:focus:ring-white/30 dark:data-[invalid]:ring-red-400/50", ); export function Form({ className, ...props }: ComponentProps) { return ( ); } export function FormField({ className, ...props }: ComponentProps) { return ; } export function FormLabel({ className, ...props }: ComponentProps) { return ( ); } /** An input by default; pass asChild to style a textarea or select the same way. */ export function FormControl({ className, ...props }: ComponentProps) { return ; } export function FormDescription({ className, ...props }: ComponentProps<"p">) { return

; } /** Shown when its `match` fails (valueMissing, typeMismatch, a function…). Slides in under the field. */ export function FormMessage({ className, children, ...props }: ComponentProps) { return ( {children} ); } export const FormValidityState = FormPrimitive.ValidityState; export interface FormSubmitProps extends ComponentProps { /** Disable the button and show a spinner while the form is submitting. */ loading?: boolean; } export function FormSubmit({ loading = false, disabled, className, children, ...props }: FormSubmitProps) { return ( {loading && } {children} ); } export default Form; 2e:T7b17,

"use client";

import { MotionConfig, motion } from "motion/react";
import { CircleAlert, LoaderCircle } from "lucide-react";
import { Form as FormPrimitive } from "radix-ui";
import type { ComponentProps } from "react";
import { cn } from "@/lib/utils";

export const formControlClasses = cn(
  "block h-10 w-full rounded-xl bg-white px-3 text-sm text-neutral-950 outline-none transition-[box-shadow,background-color]",
  "shadow-[0_1px_2px_rgb(0_0_0/0.04)] ring-1 ring-inset ring-black/[0.1] placeholder:text-neutral-400 hover:ring-black/[0.16]",
  "focus:ring-2 focus:ring-neutral-950/25 data-[invalid]:ring-red-500/50 data-[invalid]:focus:ring-red-500/40",
  "disabled:cursor-not-allowed disabled:opacity-50",
  "dark:bg-white/[0.04] dark:text-white dark:shadow-none dark:ring-white/[0.12] dark:placeholder:text-neutral-500 dark:hover:ring-white/[0.2] dark:focus:ring-white/30 dark:data-[invalid]:ring-red-400/50",
);

export function Form({ className, ...props }: ComponentProps<typeof FormPrimitive.Root>) {
  return (
    <MotionConfig reducedMotion="user">
      <FormPrimitive.Root className={cn("space-y-5", className)} {...props} />
    </MotionConfig>
  );
}

export function FormField({ className, ...props }: ComponentProps<typeof FormPrimitive.Field>) {
  return <FormPrimitive.Field className={cn("grid gap-1.5", className)} {...props} />;
}

export function FormLabel({ className, ...props }: ComponentProps<typeof FormPrimitive.Label>) {
  return (
    <FormPrimitive.Label
      className={cn("text-[13px] font-medium text-neutral-800 data-[invalid]:text-red-600 dark:text-neutral-200 dark:data-[invalid]:text-red-400", className)}
      {...props}
    />
  );
}

/** An input by default; pass asChild to style a textarea or select the same way. */
export function FormControl({ className, ...props }: ComponentProps<typeof FormPrimitive.Control>) {
  return <FormPrimitive.Control className={cn(formControlClasses, className)} {...props} />;
}

export function FormDescription({ className, ...props }: ComponentProps<"p">) {
  return <p className={cn("text-[12.5px] text-neutral-500 dark:text-neutral-400", className)} {...props} />;
}

/** Shown when its `match` fails (valueMissing, typeMismatch, a function…). Slides in under the field. */
export function FormMessage({ className, children, ...props }: ComponentProps<typeof FormPrimitive.Message>) {
  return (
    <FormPrimitive.Message asChild {...props}>
      <motion.p
        initial={{ opacity: 0, y: -4 }}
        animate={{ opacity: 1, y: 0 }}
        transition={{ type: "spring", bounce: 0, duration: 0.25 }}
        className={cn("flex items-center gap-1.5 text-[12.5px] text-red-600 dark:text-red-400", className)}
      >
        <CircleAlert className="size-3.5 shrink-0" />
        {children}
      </motion.p>
    </FormPrimitive.Message>
  );
}

export const FormValidityState = FormPrimitive.ValidityState;

export interface FormSubmitProps extends ComponentProps<typeof FormPrimitive.Submit> {
  /** Disable the button and show a spinner while the form is submitting. */
  loading?: boolean;
}

export function FormSubmit({ loading = false, disabled, className, children, ...props }: FormSubmitProps) {
  return (
    <FormPrimitive.Submit
      disabled={disabled || loading}
      className={cn(
        "inline-flex h-10 items-center justify-center gap-2 rounded-[14px] bg-neutral-950 px-4 text-sm font-medium tracking-[-0.01em] text-white outline-none",
        "shadow-[inset_0_1px_0_rgb(255_255_255/0.12),0_1px_2px_rgb(0_0_0/0.24)] transition-[background-color,transform] hover:bg-neutral-800 active:scale-[0.97]",
        "focus-visible:bg-neutral-800 disabled:pointer-events-none disabled:opacity-60 dark:bg-white dark:text-neutral-950 dark:hover:bg-neutral-200",
        className,
      )}
      {...props}
    >
      {loading && <LoaderCircle className="size-4 animate-spin" />}
      {children}
    </FormPrimitive.Submit>
  );
}

export default Form;

2f:T65f,"use client"; import { useState } from "react"; import { Form, FormControl, FormField, FormLabel, FormMessage, FormSubmit } from "@/components/scalar-ui/form"; export default function Demo() { const [done, setDone] = useState(false); return (

Create your account

Submit empty to see the validation.

); } 30:T38bb,

"use client";

import { useState } from "react";
import { Form, FormControl, FormField, FormLabel, FormMessage, FormSubmit } from "@/components/scalar-ui/form";

export default function Demo() {
  const [done, setDone] = useState(false);
  return (
    <div className="w-full max-w-[380px] rounded-[22px] bg-white p-6 shadow-[0_1px_2px_rgb(0_0_0/0.04)] ring-1 ring-black/[0.06] dark:bg-neutral-900 dark:shadow-none dark:ring-white/[0.08]">
      <h3 className="text-[16px] font-semibold tracking-[-0.015em] text-neutral-950 dark:text-white">Create your account</h3>
      <p className="mb-5 mt-1 text-[13.5px] text-neutral-500 dark:text-neutral-400">Submit empty to see the validation.</p>
      <Form
        onSubmit={(e) => {
          e.preventDefault();
          setDone(true);
        }}
      >
        <FormField name="email">
          <FormLabel>Email</FormLabel>
          <FormControl type="email" required placeholder="maya@aurora.app" />
          <FormMessage match="valueMissing">Enter your email.</FormMessage>
          <FormMessage match="typeMismatch">That doesn’t look like an email.</FormMessage>
        </FormField>
        <FormField name="password">
          <FormLabel>Password</FormLabel>
          <FormControl type="password" required minLength={8} placeholder="At least 8 characters" />
          <FormMessage match="valueMissing">Choose a password.</FormMessage>
          <FormMessage match="tooShort">Use at least 8 characters.</FormMessage>
        </FormField>
        <FormSubmit className="w-full">{done ? "Account created" : "Create account"}</FormSubmit>
      </Form>
    </div>
  );
}

31:T585,"use client"; import { useState } from "react"; import { Form, FormControl, FormDescription, FormField, FormLabel, FormMessage, FormSubmit } from "@/components/scalar-ui/form"; export default function Example() { const [taken, setTaken] = useState(false); const [loading, setLoading] = useState(false); return (

); } 32:T36b4,

"use client";

import { useState } from "react";
import { Form, FormControl, FormDescription, FormField, FormLabel, FormMessage, FormSubmit } from "@/components/scalar-ui/form";

export default function Example() {
  const [taken, setTaken] = useState(false);
  const [loading, setLoading] = useState(false);
  return (
    <div className="w-full max-w-[380px] rounded-[22px] bg-white p-6 shadow-[0_1px_2px_rgb(0_0_0/0.04)] ring-1 ring-black/[0.06] dark:bg-neutral-900 dark:shadow-none dark:ring-white/[0.08]">
      <Form
        onClearServerErrors={() => setTaken(false)}
        onSubmit={(e) => {
          e.preventDefault();
          const handle = new FormData(e.currentTarget).get("handle");
          setLoading(true);
          setTimeout(() => {
            setLoading(false);
            setTaken(handle === "maya");
          }, 900);
        }}
      >
        <FormField name="handle" serverInvalid={taken}>
          <FormLabel>Username</FormLabel>
          <FormControl required defaultValue="maya" />
          <FormDescription>Try “maya”, which is taken, then any other name.</FormDescription>
          <FormMessage match="valueMissing">Pick a username.</FormMessage>
          {taken && <FormMessage>That username is taken.</FormMessage>}
        </FormField>
        <FormSubmit loading={loading}>{loading ? "Checking" : "Claim username"}</FormSubmit>
      </Form>
    </div>
  );
}

33:T50d,import { Form, FormControl, FormDescription, FormField, FormLabel, FormMessage, FormSubmit } from "@/components/scalar-ui/form"; export default function Example() { return (

); } 34:T24d0,

import { Form, FormControl, FormDescription, FormField, FormLabel, FormMessage, FormSubmit } from "@/components/scalar-ui/form";

export default function Example() {
  return (
    <div className="w-full max-w-[380px] rounded-[22px] bg-white p-6 shadow-[0_1px_2px_rgb(0_0_0/0.04)] ring-1 ring-black/[0.06] dark:bg-neutral-900 dark:shadow-none dark:ring-white/[0.08]">
      <Form onSubmit={(e) => e.preventDefault()}>
        <FormField name="slug">
          <FormLabel>Project URL</FormLabel>
          <div className="flex items-center rounded-xl ring-1 ring-inset ring-black/[0.1] focus-within:ring-2 focus-within:ring-neutral-950/25 dark:ring-white/[0.12] dark:focus-within:ring-white/30">
            <span className="pl-3 text-sm text-neutral-400">aurora.app/</span>
            <FormControl required defaultValue="My Project" className="rounded-l-none bg-transparent pl-0.5 shadow-none ring-0 hover:ring-0 focus:ring-0 dark:bg-transparent data-[invalid]:ring-0" />
          </div>
          <FormDescription>Lowercase letters, numbers and dashes.</FormDescription>
          <FormMessage match={(value) => !/^[a-z0-9-]+$/.test(value)}>Only lowercase letters, numbers and dashes.</FormMessage>
        </FormField>
        <FormSubmit>Save</FormSubmit>
      </Form>
    </div>
  );
}

35:T506,import { Form, FormControl, FormField, FormLabel, FormMessage, FormSubmit } from "@/components/scalar-ui/form"; const row = "grid grid-cols-[120px_1fr] items-center gap-x-4 gap-y-1.5"; export default function Example() { return (

); } 36:T2d02,

import { Form, FormControl, FormField, FormLabel, FormMessage, FormSubmit } from "@/components/scalar-ui/form";

const row = "grid grid-cols-[120px_1fr] items-center gap-x-4 gap-y-1.5";

export default function Example() {
  return (
    <div className="w-full max-w-[480px] rounded-[22px] bg-white p-6 shadow-[0_1px_2px_rgb(0_0_0/0.04)] ring-1 ring-black/[0.06] dark:bg-neutral-900 dark:shadow-none dark:ring-white/[0.08]">
      <Form onSubmit={(e) => e.preventDefault()} className="space-y-4">
        <FormField name="name" className={row}>
          <FormLabel>Display name</FormLabel>
          <FormControl required defaultValue="Maya Chen" />
          <FormMessage match="valueMissing" className="col-start-2">
            Enter a name.
          </FormMessage>
        </FormField>
        <FormField name="website" className={row}>
          <FormLabel>Website</FormLabel>
          <FormControl type="url" placeholder="https://" />
          <FormMessage match="typeMismatch" className="col-start-2">
            Enter a full URL.
          </FormMessage>
        </FormField>
        <div className="flex justify-end border-t border-black/[0.06] pt-4 dark:border-white/[0.08]">
          <FormSubmit>Save changes</FormSubmit>
        </div>
      </Form>
    </div>
  );
}

37:T6c1,import { ChevronDown } from "lucide-react"; import { Form, FormControl, FormField, FormLabel, FormMessage, FormSubmit } from "@/components/scalar-ui/form"; export default function Example() { return (

e.preventDefault()}> Topic

Choose a topic. Message

</FormControl>
 <FormMessage match="valueMissing">Write a message.</FormMessage>
 <FormMessage match="tooShort">Add a little more detail (20 characters or more).</FormMessage>
 </FormField>
 <FormSubmit>Send</FormSubmit>
 </Form>
 </div>
 );
}
38:T3bdd,<pre class="shiki shiki-themes github-light github-dark-default" style="--shiki-light:#24292e;--shiki-dark:#e6edf3;--shiki-light-bg:#fff;--shiki-dark-bg:#0d1117" tabindex="0"><code>import { ChevronDown } from "lucide-react";
import { Form, FormControl, FormField, FormLabel, FormMessage, FormSubmit } from "@/components/scalar-ui/form";

export default function Example() {
 return (
 <div className="w-full max-w-[380px] rounded-[22px] bg-white p-6 shadow-[0_1px_2px_rgb(0_0_0/0.04)] ring-1 ring-black/[0.06] dark:bg-neutral-900 dark:shadow-none dark:ring-white/[0.08]">
 <Form onSubmit={(e) => e.preventDefault()}>
 <FormField name="topic">
 <FormLabel>Topic</FormLabel>
 <div className="relative">
 <FormControl asChild required className="appearance-none pr-9">
 <select defaultValue="">
 <option value="" disabled>
 Choose a topic
 </option>
 <option>Billing</option>
 <option>Bug report</option>
 <option>Feature request</option>
 </select>
 </FormControl>
 <ChevronDown className="pointer-events-none absolute right-3 top-1/2 size-4 -translate-y-1/2 text-neutral-400" />
 </div>
 <FormMessage match="valueMissing">Choose a topic.</FormMessage>
 </FormField>
 <FormField name="message">
 <FormLabel>Message</FormLabel>
 <FormControl asChild required minLength={20} className="h-auto resize-none py-2.5">
 <textarea rows={4} placeholder="Tell us what happened" />
 </FormControl>
 <FormMessage match="valueMissing">Write a message.</FormMessage>
 <FormMessage match="tooShort">Add a little more detail (20 characters or more).</FormMessage>
 </FormField>
 <FormSubmit>Send</FormSubmit>
 </Form>
 </div>
 );
}
</code></pre>29:["$","section","form",{"id":"form","aria-labelledby":"form-title","className":"scroll-mt-24","children":[["$","header",null,{"className":"mb-5 flex flex-wrap items-start justify-between gap-4","children":[["$","div",null,{"className":"min-w-0 max-w-2xl","children":[["$","div",null,{"className":"flex flex-wrap items-center gap-2","children":[["$","h2",null,{"id":"form-title","className":"sr-only","children":"Form"}],false,false]}],false,["$","p",null,{"className":"font-mono text-[11.5px] text-fg-subtle","children":"radix-ui · motion · lucide-react"}]]}],false]}],["$","$L2b",null,{"children":["$","$L2c",null,{"slug":"form","gated":{"unlocked":true,"files":[{"name":"form.tsx","code":"$2d","html":"$2e"},{"name":"demo.tsx","code":"$2f","html":"$30"}],"examples":{"server-errors":{"name":"server-errors.tsx","code":"$31","html":"$32"},"custom-validation":{"name":"custom-validation.tsx","code":"$33","html":"$34"},"inline":{"name":"inline.tsx","code":"$35","html":"$36"},"textarea-select":{"name":"textarea-select.tsx","code":"$37","html":"$38"}},"prompt":"","promptHtml":""},"install":{"cli":"npx scalar-ui add form","shadcn":"npx shadcn@latest add https://scalarui.com/r/form.json","shadcnConfig":"{\n \"registries\": {\n \"@scalar-ui\": {\n \"url\": \"https://scalarui.com/r/{name}.json\",\n \"headers\": {\n \"Authorization\": \"Bearer ${SCALAR_TOKEN}\"\n }\n }\n }\n}","mcpClaude":"claude mcp add scalar-ui \\\n -e SCALAR_TOKEN=slk_your_token \\\n -e SCALAR_URL=https://scalarui.com \\\n -- npx -y @scalardesign/mcp","mcpJson":"{\n \"mcpServers\": {\n \"scalar-ui\": {\n \"command\": \"npx\",\n \"args\": [\n \"-y\",\n \"@scalardesign/mcp\"\n ],\n \"env\": {\n \"SCALAR_TOKEN\": \"slk_your_token\",\n \"SCALAR_URL\": \"https://scalarui.com\"\n }\n }\n }\n}","npm":"npm install radix-ui motion lucide-react","origin":"https://scalarui.com"},"open":true,"prompt":false,"shadcn":false,"preview":"$L39","toolbar":"$L3a"}]}],["$L3b","$L3c","$L3d","$L3e"]]}]
</article></body></html>

Forms

Forms

Server Errors

Custom Validation

Inline Labels

Textarea and Select