InputGroupWithButtons() — ui Function Reference

Architecture documentation for the InputGroupWithButtons() function in input-group-with-buttons.tsx from the ui codebase.

Function tsx DocumentationAtlas ContentSourcing

Entity Profile

DocumentationAtlas→ ContentSourcing→ InputGroupWithButtons() — ui Function Reference

Dependency Diagram

graph TD
  81550441_5435_e889_ed5d_94f5a7438e3a["InputGroupWithButtons()"]
  cd339b0b_6ef1_aadb_d207_c89dc6de804c["input-group-with-buttons.tsx"]
  81550441_5435_e889_ed5d_94f5a7438e3a -->|defined in| cd339b0b_6ef1_aadb_d207_c89dc6de804c
  style 81550441_5435_e889_ed5d_94f5a7438e3a fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/examples/radix/input-group-with-buttons.tsx lines 12–60

export function InputGroupWithButtons() {
  return (
    <FieldGroup>
      <Field>
        <FieldLabel htmlFor="input-button-13">Button</FieldLabel>
        <InputGroup>
          <InputGroupInput id="input-button-13" />
          <InputGroupAddon>
            <InputGroupButton>Default</InputGroupButton>
          </InputGroupAddon>
        </InputGroup>
        <InputGroup>
          <InputGroupInput id="input-button-14" />
          <InputGroupAddon>
            <InputGroupButton variant="outline">Outline</InputGroupButton>
          </InputGroupAddon>
        </InputGroup>
        <InputGroup>
          <InputGroupInput id="input-button-15" />
          <InputGroupAddon>
            <InputGroupButton variant="secondary">Secondary</InputGroupButton>
          </InputGroupAddon>
        </InputGroup>
        <InputGroup>
          <InputGroupInput id="input-button-16" />
          <InputGroupAddon align="inline-end">
            <InputGroupButton variant="secondary">Button</InputGroupButton>
          </InputGroupAddon>
        </InputGroup>
        <InputGroup>
          <InputGroupInput id="input-button-17" />
          <InputGroupAddon align="inline-end">
            <InputGroupButton size="icon-xs">
              <CopyIcon />
            </InputGroupButton>
          </InputGroupAddon>
        </InputGroup>
        <InputGroup>
          <InputGroupInput id="input-button-18" />
          <InputGroupAddon align="inline-end">
            <InputGroupButton variant="secondary" size="icon-xs">
              <TrashIcon />
            </InputGroupButton>
          </InputGroupAddon>
        </InputGroup>
      </Field>
    </FieldGroup>
  )
}