FieldResponsive() — ui Function Reference

Architecture documentation for the FieldResponsive() function in field-responsive.tsx from the ui codebase.

Function tsx DocumentationAtlas Changelog

Entity Profile

DocumentationAtlas→ Changelog→ FieldResponsive() — ui Function Reference

Dependency Diagram

graph TD
  75c749b3_15d3_80e9_ec05_736c55ced4ee["FieldResponsive()"]
  0e50a2b9_d8e4_fd75_01f5_69c337ee3913["field-responsive.tsx"]
  75c749b3_15d3_80e9_ec05_736c55ced4ee -->|defined in| 0e50a2b9_d8e4_fd75_01f5_69c337ee3913
  style 75c749b3_15d3_80e9_ec05_736c55ced4ee fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/examples/base/field-responsive.tsx lines 13–41

export function FieldResponsive() {
  return (
    <div className="w-full max-w-lg">
      <form>
        <FieldSet>
          <FieldLegend>Profile</FieldLegend>
          <FieldDescription>Fill in your profile information.</FieldDescription>
          <FieldGroup>
            <Field orientation="responsive">
              <FieldContent>
                <FieldLabel htmlFor="name">Name</FieldLabel>
                <FieldDescription>
                  Provide your full name for identification
                </FieldDescription>
              </FieldContent>
              <Input id="name" placeholder="Evil Rabbit" required />
            </Field>
            <Field orientation="responsive">
              <Button type="submit">Submit</Button>
              <Button type="button" variant="outline">
                Cancel
              </Button>
            </Field>
          </FieldGroup>
        </FieldSet>
      </form>
    </div>
  )
}