ButtonGroupWithFields() — ui Function Reference

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

Function tsx ComponentRegistry ChartRegistry

Entity Profile

ComponentRegistry→ ChartRegistry→ ButtonGroupWithFields() — ui Function Reference

Dependency Diagram

graph TD
  d4d0ef5a_56b1_4b6f_ed09_a01d891e1eeb["ButtonGroupWithFields()"]
  2a9b7ea2_138d_8063_c68e_fb0dd1342c8c["button-group-example.tsx"]
  d4d0ef5a_56b1_4b6f_ed09_a01d891e1eeb -->|defined in| 2a9b7ea2_138d_8063_c68e_fb0dd1342c8c
  style d4d0ef5a_56b1_4b6f_ed09_a01d891e1eeb fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/registry/bases/radix/examples/button-group-example.tsx lines 340–382

function ButtonGroupWithFields() {
  return (
    <Example title="With Fields">
      <FieldGroup className="grid grid-cols-3 gap-4">
        <Field className="col-span-2">
          <Label htmlFor="width">Width</Label>
          <ButtonGroup>
            <InputGroup>
              <InputGroupInput id="width" />
              <InputGroupAddon className="text-muted-foreground">
                W
              </InputGroupAddon>
              <InputGroupAddon
                align="inline-end"
                className="text-muted-foreground"
              >
                px
              </InputGroupAddon>
            </InputGroup>
            <Button variant="outline" size="icon">
              <IconPlaceholder
                lucide="MinusIcon"
                tabler="IconMinus"
                hugeicons="MinusSignIcon"
                phosphor="MinusIcon"
                remixicon="RiSubtractLine"
              />
            </Button>
            <Button variant="outline" size="icon">
              <IconPlaceholder
                lucide="PlusIcon"
                tabler="IconPlus"
                hugeicons="PlusSignIcon"
                phosphor="PlusIcon"
                remixicon="RiAddLine"
              />
            </Button>
          </ButtonGroup>
        </Field>
      </FieldGroup>
    </Example>
  )
}