Skip to Content
AuroraDesign System
Input
Foundations
Color TokensTypographySpacing & RadiiBrand & MarkDirection
Controls
ButtonsButton GroupBadgesToggle SwitchToggleToggle GroupAvatarProgressSpinnerSeparatorToolbarKbd
Form Elements
Inputs & SelectsInputFieldLabelInput GroupInput OTPNative SelectSelectComboboxCheckbox & RadioRadio GroupSliderNumber InputTextareaCalendarDate PickerTabs & Pills
Feedback
AlertBannersCalloutToastsSonnerTooltipEmpty StatesSkeletonStatus IndicatorShimmerConfirmation
Navigation
BreadcrumbPaginationCommandNavigation MenuMenubar
Data
Stat CardsTablesData TableFilter BarsTimelineDescription ListSearch ResultsListboxMarketplace
Overlays
Modal & DialogAlert DialogAccordionCollapsibleDropdownsContext MenuPopoverHover CardSheetDrawerShare Dialog
Chat & AI
Prompt InputAI ElementsMessageConversationModel SelectorPersonaOpen in ChatReasoningTool CallsToolThinkingChain of ThoughtPlanTaskQueueSuggestionCode BlockArtifactTerminalPermission PromptAsk User QuestionPermissions ConfigCommand PaletteSidebar
Runtime & Execution
AgentCheckpointCommitContext PanelEnvironment VariablesPackage InfoSchema DisplaySandboxSnippetJSX PreviewStack TraceTest ResultsPanelControl StripCanvasConnectionEdgeNode
Media & Voice
Audio PlayerMic SelectorSpeech InputTranscriptionVoice Selector
Content
Attachment ChipAI AttachmentsSourcesInline CitationFile PickerFile TreeCode EditorCode WorkspaceWeb PreviewAspect RatioCardCarouselChartImageItemResizable PanelsScroll Area
Auth & Errors
LoginOAuth FlowError Pages
Themes
Light Mode
AI Elements (new)
ActionActionsAiImageGridBranchLoaderMessageAvatarMessageContentResponseSource
Aurora Extensions
ChatMessageChatSidebarColorPickerComponentCardCopyButtonMultiSelectOperationIconProgressRingRangeSliderRatingSegmentedSpotlightStatusDotStepperTagInput

Components

Input

Sizes
Leading & trailing adornments
:7474
Clearable

The × appears once the field has a value and drives the real input — form libraries see a genuine change event.

Password with reveal toggle

API keys stay masked until you explicitly reveal them.

Validation states
Success
Warning

This region is scheduled for deprecation.

Error

Token failed validation — check the format.

Error (shorthand)
Disabled & read-only
Disabled
Read-only

Text input with Aurora focus glow, leading/trailing adornment slots, and control-surface background.

Install

npx shadcn@latest add https://aurora.tootie.tv/r/aurora-input.json
Requires@aurora/aurora-tokens
npmlucide-react