BasicFields() — ui Function Reference

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

Function tsx DocumentationAtlas SearchAPI

Entity Profile

DocumentationAtlas→ SearchAPI→ BasicFields() — ui Function Reference

Dependency Diagram

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

Relationship Graph

Source Code

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

function BasicFields() {
  return (
    <Card>
      <CardContent>
        <FieldSet>
          <FieldGroup>
            <Field>
              <FieldLabel htmlFor="name-x8k">Name</FieldLabel>
              <FieldDescription>
                Enter your name so it is long enough to test the layout.
              </FieldDescription>
              <Input id="name-x8k" type="text" />
            </Field>
            <Field>
              <FieldLabel htmlFor="message-x8k">Message</FieldLabel>
              <FieldDescription>
                Enter your message so it is long enough to test the layout.
              </FieldDescription>
              <Textarea id="message-x8k" placeholder="Enter your message" />
            </Field>
            <Field>
              <FieldLabel htmlFor="message-x28k">Message</FieldLabel>
              <Textarea id="message-x28k" placeholder="Enter your message" />
              <FieldDescription>
                Enter your message so it is long enough to test the layout.
              </FieldDescription>
            </Field>
            <Field>
              <FieldLabel htmlFor="name-2-p9m">
                Name{" "}
                <Badge variant="secondary" className="ml-auto">
                  Recommended
                </Badge>
              </FieldLabel>
              <Input id="name-2-p9m" type="text" />
              <FieldDescription>
                Enter your name so it is long enough to test the layout.
              </FieldDescription>
            </Field>
            <FieldSeparator />
            <Field orientation="horizontal">
              <Checkbox id="terms-21f-q7r" />
              <FieldLabel htmlFor="terms-21f-q7r">
                Accept terms and conditions
              </FieldLabel>
            </Field>
            <Field orientation="horizontal">
              <FieldLabel htmlFor="terms-21f-w4t">
                Accept terms and conditions
              </FieldLabel>
              <Checkbox id="terms-21f-w4t" />
            </Field>
            <Field orientation="horizontal">
              <FieldLabel htmlFor="dark-mode-b5n">Dark Mode</FieldLabel>
              <Switch id="dark-mode-b5n" />
            </Field>
            <RadioGroup>
              <Field orientation="horizontal">
                <FieldLabel htmlFor="dark-mode-22-f3j">Dark Mode</FieldLabel>
                <RadioGroupItem value="dark-mode-22" id="dark-mode-22-f3j" />
              </Field>
            </RadioGroup>
            <FieldSeparator />
            <Field orientation="horizontal">
              <Checkbox id="enable-touch-id-m8v" />
              <FieldContent>
                <FieldLabel htmlFor="enable-touch-id-m8v">
                  Enable Touch ID
                </FieldLabel>
                <FieldDescription>
                  Enable Touch ID to quickly unlock your device.
                </FieldDescription>
              </FieldContent>
            </Field>
            <Field orientation="horizontal">
              <Checkbox id="enable-touch-id-88v" />
              <FieldContent>
                <FieldLabel htmlFor="enable-touch-id-88v">
                  Enable Touch ID and Face ID to make it even faster to unlock
                  your device. This is a long label to test the layout.
                </FieldLabel>