InputGroupBasic() — ui Function Reference

Architecture documentation for the InputGroupBasic() function in input-group-example.tsx from the ui codebase.

Function tsx ComponentRegistry UIPrimitives

Entity Profile

ComponentRegistry→ UIPrimitives→ InputGroupBasic() — ui Function Reference

Dependency Diagram

graph TD
  229d7eaa_98c3_ac99_d0be_ba1c6e0b2cf4["InputGroupBasic()"]
  a740b52a_e6c2_0afa_8096_0716feaa239c["input-group-example.tsx"]
  229d7eaa_98c3_ac99_d0be_ba1c6e0b2cf4 -->|defined in| a740b52a_e6c2_0afa_8096_0716feaa239c
  style 229d7eaa_98c3_ac99_d0be_ba1c6e0b2cf4 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/registry/bases/base/examples/input-group-example.tsx lines 78–117

function InputGroupBasic() {
  return (
    <Example title="Basic">
      <FieldGroup>
        <Field>
          <FieldLabel htmlFor="input-default-01">
            Default (No Input Group)
          </FieldLabel>
          <Input placeholder="Placeholder" id="input-default-01" />
        </Field>
        <Field>
          <FieldLabel htmlFor="input-group-02">Input Group</FieldLabel>
          <InputGroup>
            <InputGroupInput id="input-group-02" placeholder="Placeholder" />
          </InputGroup>
        </Field>
        <Field data-disabled="true">
          <FieldLabel htmlFor="input-disabled-03">Disabled</FieldLabel>
          <InputGroup>
            <InputGroupInput
              id="input-disabled-03"
              placeholder="This field is disabled"
              disabled
            />
          </InputGroup>
        </Field>
        <Field data-invalid="true">
          <FieldLabel htmlFor="input-invalid-04">Invalid</FieldLabel>
          <InputGroup>
            <InputGroupInput
              id="input-invalid-04"
              placeholder="This field is invalid"
              aria-invalid="true"
            />
          </InputGroup>
        </Field>
      </FieldGroup>
    </Example>
  )
}