InputGroupSpinner() — ui Function Reference

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

Function tsx DocumentationAtlas ContentSourcing

Entity Profile

DocumentationAtlas→ ContentSourcing→ InputGroupSpinner() — ui Function Reference

Dependency Diagram

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

Relationship Graph

Source Code

apps/v4/examples/radix/input-group-spinner.tsx lines 10–45

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