InputGroupSpinner() — ui Function Reference

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

Function tsx ComponentRegistry ChartRegistry

Entity Profile

ComponentRegistry→ ChartRegistry→ InputGroupSpinner() — ui Function Reference

Dependency Diagram

graph TD
  757a5cc6_0f73_035b_ca91_74ca6a3fcff6["InputGroupSpinner()"]
  eb6f6521_3eed_fe4c_ed69_d472e6cdf527["input-group-spinner.tsx"]
  757a5cc6_0f73_035b_ca91_74ca6a3fcff6 -->|defined in| eb6f6521_3eed_fe4c_ed69_d472e6cdf527
  style 757a5cc6_0f73_035b_ca91_74ca6a3fcff6 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/registry/new-york-v4/examples/input-group-spinner.tsx lines 11–46

export default function InputGroupSpinner() {
  return (
    <div className="grid w-full max-w-sm gap-4">
      <InputGroup data-disabled>
        <InputGroupInput placeholder="Searching..." disabled />
        <InputGroupAddon align="inline-end">
          <Spinner />
        </InputGroupAddon>
      </InputGroup>
      <InputGroup data-disabled>
        <InputGroupInput placeholder="Processing..." disabled />
        <InputGroupAddon>
          <Spinner />
        </InputGroupAddon>
      </InputGroup>
      <InputGroup data-disabled>
        <InputGroupInput placeholder="Saving changes..." disabled />
        <InputGroupAddon align="inline-end">
          <InputGroupText>Saving...</InputGroupText>
          <Spinner />
        </InputGroupAddon>
      </InputGroup>
      <InputGroup data-disabled>
        <InputGroupInput placeholder="Refreshing data..." disabled />
        <InputGroupAddon>
          <LoaderIcon className="animate-spin" />
        </InputGroupAddon>
        <InputGroupAddon align="inline-end">
          <InputGroupText className="text-muted-foreground">
            Please wait...
          </InputGroupText>
        </InputGroupAddon>
      </InputGroup>
    </div>
  )
}