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
  f1a1fe94_9a29_9640_b8b4_7c29b49fe5f4["InputFieldgroup()"]
  959d4dd8_afd0_322d_ae0e_9f5c8428179f["input-fieldgroup.tsx"]
  f1a1fe94_9a29_9640_b8b4_7c29b49fe5f4 -->|defined in| 959d4dd8_afd0_322d_ae0e_9f5c8428179f
  style f1a1fe94_9a29_9640_b8b4_7c29b49fe5f4 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

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