FieldInput() — ui Function Reference

Architecture documentation for the FieldInput() function in field-input.tsx from the ui codebase.

Function tsx DocumentationAtlas ContentSourcing

Entity Profile

DocumentationAtlas→ ContentSourcing→ FieldInput() — ui Function Reference

Dependency Diagram

graph TD
  77968617_57e9_2769_802c_14946fe2416e["FieldInput()"]
  d6d290f2_25f0_06ab_e960_8c310feef521["field-input.tsx"]
  77968617_57e9_2769_802c_14946fe2416e -->|defined in| d6d290f2_25f0_06ab_e960_8c310feef521
  style 77968617_57e9_2769_802c_14946fe2416e fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/examples/base/field-input.tsx lines 10–31

export default function FieldInput() {
  return (
    <FieldSet className="w-full max-w-xs">
      <FieldGroup>
        <Field>
          <FieldLabel htmlFor="username">Username</FieldLabel>
          <Input id="username" type="text" placeholder="Max Leiter" />
          <FieldDescription>
            Choose a unique username for your account.
          </FieldDescription>
        </Field>
        <Field>
          <FieldLabel htmlFor="password">Password</FieldLabel>
          <FieldDescription>
            Must be at least 8 characters long.
          </FieldDescription>
          <Input id="password" type="password" placeholder="••••••••" />
        </Field>
      </FieldGroup>
    </FieldSet>
  )
}