ButtonGroupWithSelectAndInput() — ui Function Reference

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

Function tsx ComponentRegistry ChartRegistry

Entity Profile

ComponentRegistry→ ChartRegistry→ ButtonGroupWithSelectAndInput() — ui Function Reference

Dependency Diagram

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

Relationship Graph

Source Code

apps/v4/registry/bases/radix/examples/button-group-example.tsx lines 407–427

function ButtonGroupWithSelectAndInput() {
  return (
    <Example title="With Select and Input">
      <ButtonGroup>
        <Select defaultValue="hours">
          <SelectTrigger id="duration">
            <SelectValue placeholder="Select duration" />
          </SelectTrigger>
          <SelectContent align="start">
            <SelectGroup>
              <SelectItem value="hours">Hours</SelectItem>
              <SelectItem value="days">Days</SelectItem>
              <SelectItem value="weeks">Weeks</SelectItem>
            </SelectGroup>
          </SelectContent>
        </Select>
        <Input />
      </ButtonGroup>
    </Example>
  )
}