FormInputTypesDemo() — ui Function Reference

Architecture documentation for the FormInputTypesDemo() function in field-demo.tsx from the ui codebase.

Function tsx DocumentationAtlas SearchAPI

Entity Profile

DocumentationAtlas→ SearchAPI→ FormInputTypesDemo() — ui Function Reference

Dependency Diagram

graph TD
  3a760f80_45d9_46e9_bda8_6f4f3b8cd6c6["FormInputTypesDemo()"]
  b9b36d9d_9701_6134_d4ee_41213e7f1788["field-demo.tsx"]
  3a760f80_45d9_46e9_bda8_6f4f3b8cd6c6 -->|defined in| b9b36d9d_9701_6134_d4ee_41213e7f1788
  style 3a760f80_45d9_46e9_bda8_6f4f3b8cd6c6 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/app/(internal)/sink/components/field-demo.tsx lines 2617–2694

export function FormInputTypesDemo() {
  return (
    <Card>
      <CardHeader>
        <CardTitle>Text Input Types</CardTitle>
        <CardDescription>Text-based HTML input variations</CardDescription>
      </CardHeader>
      <CardContent>
        <FieldGroup>
          <Field>
            <FieldLabel htmlFor="text-input-qmg">Text</FieldLabel>
            <Input id="text-input-qmg" type="text" placeholder="Enter text" />
            <FieldDescription>Standard text input field.</FieldDescription>
          </Field>
          <Field>
            <FieldLabel htmlFor="email-input-19f">Email</FieldLabel>
            <Input
              id="email-input-19f"
              type="email"
              placeholder="name@example.com"
            />
            <FieldDescription>Email address with validation.</FieldDescription>
          </Field>
          <Field>
            <FieldLabel htmlFor="password-input-63z">Password</FieldLabel>
            <Input
              id="password-input-63z"
              type="password"
              placeholder="Enter password"
            />
            <FieldDescription>
              Password field with hidden text.
            </FieldDescription>
          </Field>
          <Field>
            <FieldLabel htmlFor="tel-input-iw1">Phone</FieldLabel>
            <Input
              id="tel-input-iw1"
              type="tel"
              placeholder="+1 (555) 123-4567"
            />
            <FieldDescription>Telephone number input.</FieldDescription>
          </Field>
          <Field>
            <FieldLabel htmlFor="url-input-ku7">URL</FieldLabel>
            <Input
              id="url-input-ku7"
              type="url"
              placeholder="https://example.com"
            />
            <FieldDescription>Website URL with validation.</FieldDescription>
          </Field>
          <Field>
            <FieldLabel htmlFor="search-input-mhf">Search</FieldLabel>
            <Input
              id="search-input-mhf"
              type="search"
              placeholder="Search..."
            />
            <FieldDescription>Search field with clear button.</FieldDescription>
          </Field>
          <Field>
            <FieldLabel htmlFor="number-input-u7u">Number</FieldLabel>
            <Input
              id="number-input-u7u"
              type="number"
              placeholder="42"
              min="0"
              max="100"
              step="1"
            />
            <FieldDescription>Numeric input (0-100).</FieldDescription>
          </Field>
        </FieldGroup>
      </CardContent>
    </Card>
  )
}