SurveyForm() — ui Function Reference

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

Function tsx DocumentationAtlas Changelog

Entity Profile

DocumentationAtlas→ Changelog→ SurveyForm() — ui Function Reference

Dependency Diagram

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

Relationship Graph

Source Code

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

export function SurveyForm() {
  return (
    <Card>
      <CardHeader>
        <CardTitle>Customer Survey</CardTitle>
        <CardDescription>
          Help us understand your needs better (5 minutes)
        </CardDescription>
      </CardHeader>
      <CardContent>
        <form>
          <FieldGroup>
            <Field>
              <FieldLabel htmlFor="surveyName-eqj">Name (Optional)</FieldLabel>
              <Input id="surveyName-eqj" placeholder="Your name" />
            </Field>
            <Field>
              <FieldLabel htmlFor="ageGroup-302">Age Group</FieldLabel>
              <Select>
                <SelectTrigger>
                  <SelectValue placeholder="Select age group" />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="18-24">18-24</SelectItem>
                  <SelectItem value="25-34">25-34</SelectItem>
                  <SelectItem value="35-44">35-44</SelectItem>
                  <SelectItem value="45-54">45-54</SelectItem>
                  <SelectItem value="55+">55+</SelectItem>
                </SelectContent>
              </Select>
            </Field>
            <Field>
              <FieldLabel>How often do you use our product?</FieldLabel>
              <RadioGroup>
                <Field orientation="horizontal">
                  <RadioGroupItem value="daily" id="daily-lrv" />
                  <FieldLabel htmlFor="daily-lrv">Daily</FieldLabel>
                </Field>
                <Field orientation="horizontal">
                  <RadioGroupItem value="weekly" id="weekly-mga" />
                  <FieldLabel htmlFor="weekly-mga">Weekly</FieldLabel>
                </Field>
                <Field orientation="horizontal">
                  <RadioGroupItem value="monthly" id="monthly-7gl" />
                  <FieldLabel htmlFor="monthly-7gl">Monthly</FieldLabel>
                </Field>
                <Field orientation="horizontal">
                  <RadioGroupItem value="rarely" id="rarely-hlw" />
                  <FieldLabel htmlFor="rarely-hlw">Rarely</FieldLabel>
                </Field>
              </RadioGroup>
            </Field>
            <Field>
              <FieldLabel>
                Which features do you use most? (Select all that apply)
              </FieldLabel>
              <div className="grid w-full grid-cols-2 gap-2">
                <Field orientation="horizontal">
                  <Checkbox id="dashboard-epk" />
                  <FieldLabel htmlFor="dashboar d-epk" className="text-sm">
                    Dashboard
                  </FieldLabel>
                </Field>
                <Field orientation="horizontal">
                  <Checkbox id="reports-jkm" />
                  <FieldLabel htmlFor="reports-jkm" className="text-sm">
                    Reports
                  </FieldLabel>
                </Field>
                <Field orientation="horizontal">
                  <Checkbox id="analytics-kwm" />
                  <FieldLabel htmlFor="analytics-kwm" className="text-sm">
                    Analytics
                  </FieldLabel>
                </Field>
                <Field orientation="horizontal">
                  <Checkbox id="integrations-euz" />
                  <FieldLabel htmlFor="integrations-euz" className="text-sm">
                    Integrations
                  </FieldLabel>
                </Field>