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
  79168581_3c6a_05d0_a0c3_2a3e0faa343b["FieldResponsive()"]
  6a61117f_f169_d745_bf9a_30bc7e101dbd["field-responsive.tsx"]
  79168581_3c6a_05d0_a0c3_2a3e0faa343b -->|defined in| 6a61117f_f169_d745_bf9a_30bc7e101dbd
  style 79168581_3c6a_05d0_a0c3_2a3e0faa343b fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/examples/radix/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>
  )
}