HearAboutUs() — ui Function Reference

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

Function tsx DocumentationAtlas Changelog

Entity Profile

DocumentationAtlas→ Changelog→ HearAboutUs() — ui Function Reference

Dependency Diagram

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

Relationship Graph

Source Code

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

function HearAboutUs() {
  return (
    <Card>
      <CardContent>
        <form>
          <FieldGroup>
            <FieldSet>
              <FieldLegend>How did you hear about us?</FieldLegend>
              <FieldDescription>
                Select the option that best describes how you heard about us.
              </FieldDescription>
              <FieldGroup className="flex flex-row flex-wrap gap-2 [--radius:9999rem] **:data-[slot=checkbox]:rounded-full **:data-[slot=field]:gap-2 **:data-[slot=field]:overflow-hidden **:data-[slot=field]:px-2.5 **:data-[slot=field]:py-2 *:data-[slot=field-label]:w-fit">
                <FieldLabel htmlFor="social-media-b2s">
                  <Field orientation="horizontal">
                    <Checkbox
                      value="social-media"
                      id="social-media-b2s"
                      className="-ml-6 -translate-x-1 transition-all duration-100 group-has-data-[state=checked]/field-label:ml-0 group-has-data-[state=checked]/field-label:translate-x-0"
                    />
                    <FieldTitle>Social Media</FieldTitle>
                  </Field>
                </FieldLabel>
                <FieldLabel htmlFor="search-engine-f6h">
                  <Field orientation="horizontal">
                    <Checkbox
                      value="search-engine"
                      id="search-engine-f6h"
                      className="-ml-6 -translate-x-1 transition-all duration-100 group-has-data-[state=checked]/field-label:ml-0 group-has-data-[state=checked]/field-label:translate-x-0"
                    />
                    <FieldTitle>Search Engine</FieldTitle>
                  </Field>
                </FieldLabel>
                <FieldLabel htmlFor="referral-l3n">
                  <Field orientation="horizontal">
                    <Checkbox
                      value="referral"
                      id="referral-l3n"
                      className="-ml-6 -translate-x-1 transition-all duration-100 group-has-data-[state=checked]/field-label:ml-0 group-has-data-[state=checked]/field-label:translate-x-0"
                    />
                    <FieldTitle>Referral</FieldTitle>
                  </Field>
                </FieldLabel>
                <FieldLabel htmlFor="other-u5c">
                  <Field orientation="horizontal">
                    <Checkbox
                      value="other"
                      id="other-u5c"
                      className="-ml-6 -translate-x-1 transition-all duration-100 group-has-data-[state=checked]/field-label:ml-0 group-has-data-[state=checked]/field-label:translate-x-0"
                    />
                    <FieldTitle>Other (Please specify)</FieldTitle>
                  </Field>
                </FieldLabel>
              </FieldGroup>
            </FieldSet>
          </FieldGroup>
        </form>
      </CardContent>
    </Card>
  )
}