InputForm() — ui Function Reference

Architecture documentation for the InputForm() function in input-form.tsx from the ui codebase.

Function tsx DocumentationAtlas SearchAPI

Entity Profile

DocumentationAtlas→ SearchAPI→ InputForm() — ui Function Reference

Dependency Diagram

graph TD
  8055254c_2a06_8b24_c2ed_2101ec2f5132["InputForm()"]
  a2a11a69_d3ad_e3ea_c3e1_3cc4392a7188["input-form.tsx"]
  8055254c_2a06_8b24_c2ed_2101ec2f5132 -->|defined in| a2a11a69_d3ad_e3ea_c3e1_3cc4392a7188
  style 8055254c_2a06_8b24_c2ed_2101ec2f5132 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/examples/base/input-form.tsx lines 18–79

export function InputForm() {
  const countries = [
    { label: "United States", value: "us" },
    { label: "United Kingdom", value: "uk" },
    { label: "Canada", value: "ca" },
  ]
  return (
    <form className="w-full max-w-sm">
      <FieldGroup>
        <Field>
          <FieldLabel htmlFor="form-name">Name</FieldLabel>
          <Input
            id="form-name"
            type="text"
            placeholder="Evil Rabbit"
            required
          />
        </Field>
        <Field>
          <FieldLabel htmlFor="form-email">Email</FieldLabel>
          <Input id="form-email" type="email" placeholder="john@example.com" />
          <FieldDescription>
            We&apos;ll never share your email with anyone.
          </FieldDescription>
        </Field>
        <div className="grid grid-cols-2 gap-4">
          <Field>
            <FieldLabel htmlFor="form-phone">Phone</FieldLabel>
            <Input id="form-phone" type="tel" placeholder="+1 (555) 123-4567" />
          </Field>
          <Field>
            <FieldLabel htmlFor="form-country">Country</FieldLabel>
            <Select items={countries} defaultValue="us">
              <SelectTrigger id="form-country">
                <SelectValue />
              </SelectTrigger>
              <SelectContent>
                <SelectGroup>
                  {countries.map((country) => (
                    <SelectItem key={country.value} value={country.value}>
                      {country.label}
                    </SelectItem>
                  ))}
                </SelectGroup>
              </SelectContent>
            </Select>
          </Field>
        </div>
        <Field>
          <FieldLabel htmlFor="form-address">Address</FieldLabel>
          <Input id="form-address" type="text" placeholder="123 Main St" />
        </Field>
        <Field orientation="horizontal">
          <Button type="button" variant="outline">
            Cancel
          </Button>
          <Button type="submit">Submit</Button>
        </Field>
      </FieldGroup>
    </form>
  )
}