InputFields() — ui Function Reference

Architecture documentation for the InputFields() function in field-example.tsx from the ui codebase.

Function tsx ComponentRegistry UIPrimitives

Entity Profile

ComponentRegistry→ UIPrimitives→ InputFields() — ui Function Reference

Dependency Diagram

graph TD
  31267381_878c_85b3_ab90_a60e7ff4f7ab["InputFields()"]
  88052f7e_baae_5fcd_95fe_0a964a30baa3["field-example.tsx"]
  31267381_878c_85b3_ab90_a60e7ff4f7ab -->|defined in| 88052f7e_baae_5fcd_95fe_0a964a30baa3
  style 31267381_878c_85b3_ab90_a60e7ff4f7ab fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/registry/bases/base/examples/field-example.tsx lines 67–139

function InputFields() {
  return (
    <Example title="Input Fields">
      <FieldGroup>
        <Field>
          <FieldLabel htmlFor="input-basic">Basic Input</FieldLabel>
          <Input id="input-basic" placeholder="Enter text" />
        </Field>
        <Field>
          <FieldLabel htmlFor="input-with-desc">
            Input with Description
          </FieldLabel>
          <Input id="input-with-desc" placeholder="Enter your username" />
          <FieldDescription>
            Choose a unique username for your account.
          </FieldDescription>
        </Field>
        <Field>
          <FieldLabel htmlFor="input-desc-first">Email Address</FieldLabel>
          <FieldDescription>
            We&apos;ll never share your email with anyone.
          </FieldDescription>
          <Input
            id="input-desc-first"
            type="email"
            placeholder="email@example.com"
          />
        </Field>
        <Field>
          <FieldLabel htmlFor="input-required">
            Required Field <span className="text-destructive">*</span>
          </FieldLabel>
          <Input
            id="input-required"
            placeholder="This field is required"
            required
          />
          <FieldDescription>This field must be filled out.</FieldDescription>
        </Field>
        <Field>
          <FieldLabel htmlFor="input-disabled">Disabled Input</FieldLabel>
          <Input id="input-disabled" placeholder="Cannot edit" disabled />
          <FieldDescription>This field is currently disabled.</FieldDescription>
        </Field>
        <Field>
          <FieldLabel htmlFor="input-badge">
            Input with Badge{" "}
            <Badge variant="secondary" className="ml-auto">
              Recommended
            </Badge>
          </FieldLabel>
          <Input id="input-badge" placeholder="Enter value" />
        </Field>
        <Field data-invalid>
          <FieldLabel htmlFor="input-invalid">Invalid Input</FieldLabel>
          <Input
            id="input-invalid"
            placeholder="This field has an error"
            aria-invalid
          />
          <FieldDescription>
            This field contains validation errors.
          </FieldDescription>
        </Field>
        <Field data-disabled>
          <FieldLabel htmlFor="input-disabled-field">Disabled Field</FieldLabel>
          <Input id="input-disabled-field" placeholder="Cannot edit" disabled />
          <FieldDescription>This field is currently disabled.</FieldDescription>
        </Field>
      </FieldGroup>
    </Example>
  )
}