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
  eb8668c4_fd0a_2d39_82c7_d90f61ecf12b["InputGroupSpinner()"]
  e0865735_703f_f679_f8e2_f42ff6ba80ef["input-group-spinner.tsx"]
  eb8668c4_fd0a_2d39_82c7_d90f61ecf12b -->|defined in| e0865735_703f_f679_f8e2_f42ff6ba80ef
  style eb8668c4_fd0a_2d39_82c7_d90f61ecf12b fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/examples/base/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>
  )
}