FormFieldSeparatorDemo() — ui Function Reference

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

Function tsx DocumentationAtlas SearchAPI

Entity Profile

DocumentationAtlas→ SearchAPI→ FormFieldSeparatorDemo() — ui Function Reference

Dependency Diagram

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

Relationship Graph

Source Code

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

export function FormFieldSeparatorDemo() {
  return (
    <Card>
      <CardHeader>
        <CardTitle>Field Separator</CardTitle>
        <CardDescription>
          Different ways to use the FieldSeparator component
        </CardDescription>
      </CardHeader>
      <CardContent>
        <FieldGroup>
          <Field>
            <FieldLabel htmlFor="section1-input-ieg">Section 1</FieldLabel>
            <Input id="section1-input-ieg" placeholder="First section input" />
            <FieldDescription>
              This is the first section of the form.
            </FieldDescription>
          </Field>
          <FieldSeparator />
          <Field>
            <FieldLabel htmlFor="section2-input-mh9">Section 2</FieldLabel>
            <Input id="section2-input-mh9" placeholder="Second section input" />
            <FieldDescription>
              A simple separator line appears above this section.
            </FieldDescription>
          </Field>
          <FieldSeparator>Or continue with</FieldSeparator>
          <Field>
            <Button variant="outline" className="w-full">
              Alternative Option 1
            </Button>
            <Button variant="outline" className="w-full">
              Alternative Option 2
            </Button>
          </Field>
          <FieldSeparator>Additional Options</FieldSeparator>
          <FieldGroup>
            <Field orientation="horizontal">
              <Checkbox id="option1-ntl" />
              <FieldContent>
                <FieldLabel htmlFor="option1-ntl" className="font-normal">
                  Enable additional features
                </FieldLabel>
              </FieldContent>
            </Field>
            <Field orientation="horizontal">
              <Checkbox id="option2-n0m" />
              <FieldContent>
                <FieldLabel htmlFor="option2-n0m" className="font-normal">
                  Subscribe to updates
                </FieldLabel>
              </FieldContent>
            </Field>
          </FieldGroup>
          <FieldSeparator />
          <Field>
            <FieldLabel htmlFor="final-section-mk8">Final Section</FieldLabel>
            <Textarea
              id="final-section-mk8"
              placeholder="Any additional comments..."
              className="min-h-[80px]"
            />
          </Field>
          <FieldSeparator>Or choose a different path</FieldSeparator>
          <RadioGroup defaultValue="option1">
            <Field orientation="horizontal">
              <RadioGroupItem value="option1" id="path1-pgt" />
              <FieldLabel htmlFor="path1-pgt" className="font-normal">
                Option Path 1
              </FieldLabel>
            </Field>
            <Field orientation="horizontal">
              <RadioGroupItem value="option2" id="path2-7pd" />
              <FieldLabel htmlFor="path2-7pd" className="font-normal">
                Option Path 2
              </FieldLabel>
            </Field>
          </RadioGroup>
          <FieldSeparator>Account Settings</FieldSeparator>
          <FieldGroup>
            <Field orientation="horizontal">