InputFieldgroup() — ui Function Reference

Architecture documentation for the InputFieldgroup() function in input-fieldgroup.tsx from the ui codebase.

Function tsx DocumentationAtlas ContentSourcing

Entity Profile

DocumentationAtlas→ ContentSourcing→ InputFieldgroup() — ui Function Reference

Dependency Diagram

graph TD
  b7af7a48_084b_0b28_128c_989b0142838c["InputFieldgroup()"]
  3593a3a8_e889_03e2_250b_2b7ca54d25c2["input-fieldgroup.tsx"]
  b7af7a48_084b_0b28_128c_989b0142838c -->|defined in| 3593a3a8_e889_03e2_250b_2b7ca54d25c2
  style b7af7a48_084b_0b28_128c_989b0142838c fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/examples/radix/input-fieldgroup.tsx lines 10–36

export function InputFieldgroup() {
  return (
    <FieldGroup>
      <Field>
        <FieldLabel htmlFor="fieldgroup-name">Name</FieldLabel>
        <Input id="fieldgroup-name" placeholder="Jordan Lee" />
      </Field>
      <Field>
        <FieldLabel htmlFor="fieldgroup-email">Email</FieldLabel>
        <Input
          id="fieldgroup-email"
          type="email"
          placeholder="name@example.com"
        />
        <FieldDescription>
          We&apos;ll send updates to this address.
        </FieldDescription>
      </Field>
      <Field orientation="horizontal">
        <Button type="reset" variant="outline">
          Reset
        </Button>
        <Button type="submit">Submit</Button>
      </Field>
    </FieldGroup>
  )
}