FormSpecialInputTypesDemo() — ui Function Reference

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

Function tsx DocumentationAtlas Changelog

Entity Profile

DocumentationAtlas→ Changelog→ FormSpecialInputTypesDemo() — ui Function Reference

Dependency Diagram

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

Relationship Graph

Source Code

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

export function FormSpecialInputTypesDemo() {
  return (
    <Card>
      <CardHeader>
        <CardTitle>Special Input Types</CardTitle>
        <CardDescription>
          Date, time, file and other special inputs
        </CardDescription>
      </CardHeader>
      <CardContent>
        <FieldGroup>
          <Field>
            <FieldLabel htmlFor="date-input-u7h">Date</FieldLabel>
            <Input id="date-input-u7h" type="date" />
            <FieldDescription>Native date picker.</FieldDescription>
          </Field>
          <Field>
            <FieldLabel htmlFor="time-input-2oj">Time</FieldLabel>
            <Input id="time-input-2oj" type="time" />
            <FieldDescription>
              Time selection (24-hour format).
            </FieldDescription>
          </Field>
          <Field>
            <FieldLabel htmlFor="datetime-input-3jq">Date & Time</FieldLabel>
            <Input id="datetime-input-3jq" type="datetime-local" />
            <FieldDescription>Combined date and time picker.</FieldDescription>
          </Field>
          <Field>
            <FieldLabel htmlFor="month-input-667">Month</FieldLabel>
            <Input id="month-input-667" type="month" />
            <FieldDescription>Month and year selector.</FieldDescription>
          </Field>
          <Field>
            <FieldLabel htmlFor="week-input-3bv">Week</FieldLabel>
            <Input id="week-input-3bv" type="week" />
            <FieldDescription>Week number selector.</FieldDescription>
          </Field>
          <Field>
            <FieldLabel htmlFor="file-input-hmb">File Upload</FieldLabel>
            <Input id="file-input-hmb" type="file" accept="image/*,.pdf" />
            <FieldDescription>Upload images or PDF files.</FieldDescription>
          </Field>
          <Field>
            <FieldLabel htmlFor="files-input-p9u">Multiple Files</FieldLabel>
            <Input
              id="files-input-p9u"
              type="file"
              multiple
              accept=".jpg,.jpeg,.png"
            />
            <FieldDescription>Upload multiple image files.</FieldDescription>
          </Field>
        </FieldGroup>
      </CardContent>
    </Card>
  )
}