# Components

**Items:** 52

## Overview

Production-ready UI building blocks for citizen-facing services. Each item below links to a detailed LLM-ready guide and the interactive Storybook canvas.

## Items

- [Accessibility Bar](https://doc.ux4g.gov.in/web/llms/components/accessibility-bar.md) — Accessibility Bar provides users with quick access to features that enhances usability and inclusivity, such as text resizing, contrast adjustments, screen reader support and other accessibility settings. It helps ensure a more comfortable and accessible experience for users with diverse needs and preferences.s. (https://doc.ux4g.gov.in/web/?path=/story/ux4g-components-accessibility-bar--introduction)
- [Accordion](https://doc.ux4g.gov.in/web/llms/components/accordion.md) — Accordion are used to organize content in a compact, collapsible manner, making it easier for users to navigate and find information without overwhelming them too much content at once (https://doc.ux4g.gov.in/web/?path=/story/ux4g-components-accordion--introduction)
- [Alert](https://doc.ux4g.gov.in/web/llms/components/alert.md) — An inline alert component for communicating status, warnings, or contextual information within a page. Supports leading icon, title, body content with progress bar and action buttons, and configurable trailing UI. (https://doc.ux4g.gov.in/web/?path=/story/ux4g-components-alert--introduction)
- [Avatar](https://doc.ux4g.gov.in/web/llms/components/avatar.md) — Avatar is a visual representation of a user, business, or entity. It provide quick visual identification in headers, comments, chat messages, and user profiles. (https://doc.ux4g.gov.in/web/?path=/story/ux4g-components-avatar--introduction)
- [Badge](https://doc.ux4g.gov.in/web/llms/components/badge.md) — Badge displays concise contextual information such as counts, statuses or notifications. It is commonly attached to other interface elements to draw attention without interrupting the user experience. (https://doc.ux4g.gov.in/web/?path=/story/ux4g-components-badge--introduction)
- [Breadcrumb](https://doc.ux4g.gov.in/web/llms/components/breadcrumb.md) — Breadcrumbs are a secondary navigation aid showing a user\'s location in a website\'s hierarchy, appearing as a trail of links (e.g., Home > Category > Subcategory > Current Page) to help users understand where they are and easily backtrack to previous levels. (https://doc.ux4g.gov.in/web/?path=/story/ux4g-components-breadcrumb--introduction)
- [Buttons](https://doc.ux4g.gov.in/web/llms/components/buttons.md) — Button trigger an action or event, such as submitting a form, opening a dialog or performing a specific task. It provide users with a clear Call to Action (CTA), guiding them through a workflow. (https://doc.ux4g.gov.in/web/?path=/story/ux4g-components-buttons--introduction)
- [Card](https://doc.ux4g.gov.in/web/llms/components/card.md) — Card is a flexible, container like component that visually groups related pieces of information and actions about a single subject. It supports images, text and actions in a flexible content container. | (https://doc.ux4g.gov.in/web/?path=/story/ux4g-components-card--introduction)
- [Carousel](https://doc.ux4g.gov.in/web/llms/components/carousel.md) — Carousel is a horizontally scrollable layout that displays a series of items. It shows a collection of carousel items that can be scrolled on and off the screen. It may come with controls (e.g. arrows or buttons) allowing the user to manually scroll through. Carousel UI elements are commonly seen in the following design patterns: Image gallery, Onboarding screens, Product catalogs. (https://doc.ux4g.gov.in/web/?path=/story/ux4g-components-carousel--introduction)
- [Checkbox](https://doc.ux4g.gov.in/web/llms/components/checkbox.md) — Checkbox present a list of options where users can make multiple selections, a single selection or none at all. They support user interaction by allowing the selection of independent items ensuring that users can easily customize settings, filter search results and submit multi choice forms with clarity. (https://doc.ux4g.gov.in/web/?path=/story/ux4g-components-checkbox--introduction)
- [Chips](https://doc.ux4g.gov.in/web/llms/components/chips.md) — Chips are compact UI elements that represent discrete information, such as tags, categories, selections, or input. They help users quickly filter, select, or manage items in an interface. (https://doc.ux4g.gov.in/web/?path=/story/ux4g-components-chips--introduction)
- [Chip Group](https://doc.ux4g.gov.in/web/llms/components/chip-group.md) — A collection of compact interactive chips for filtering or selecting options. Supports Filter (multi-select) and Choice (single-select) types, horizontal and wrapped layouts, and overflow handling for both desktop and mobile contexts. (https://doc.ux4g.gov.in/web/?path=/story/ux4g-components-chip-group--introduction)
- [Combobox](https://doc.ux4g.gov.in/web/llms/components/combobox.md) — See Storybook (https://doc.ux4g.gov.in/web/?path=/story/ux4g-components-combobox--introduction)
- [Date Picker](https://doc.ux4g.gov.in/web/llms/components/date-picker.md) — Date Picker component allows users to select a single date or a range of dates using a calendar interface. It ensures accurate and consistent date selection across workflows. (https://doc.ux4g.gov.in/web/?path=/story/ux4g-components-date-picker--introduction)
- [Divider](https://doc.ux4g.gov.in/web/llms/components/divider.md) — Divider is a thin line that groups content in lists and containers. It helps in improving content organization by separating content visually, making it easier for users to scan and understand information. (https://doc.ux4g.gov.in/web/?path=/story/ux4g-components-divider--introduction)
- [Draft Status](https://doc.ux4g.gov.in/web/llms/components/draft-status.md) — Draft Status Banner component displays a persistent notification indicating that content is currently in draft mode. It helps users distinguish unpublished content from published information. (https://doc.ux4g.gov.in/web/?path=/story/ux4g-components-draft-status--introduction)
- [Drawer](https://doc.ux4g.gov.in/web/llms/components/drawer.md) — Drawer slides into view from the edge of the screen to display additional content, navigation, or actions. It keeps the primary interface uncluttered while providing quick access to secondary information. (https://doc.ux4g.gov.in/web/?path=/story/ux4g-components-drawer--introduction)
- [Dropdown](https://doc.ux4g.gov.in/web/llms/components/dropdown.md) — See Storybook (https://doc.ux4g.gov.in/web/?path=/story/ux4g-components-dropdown--introduction)
- [Empty State](https://doc.ux4g.gov.in/web/llms/components/empty-state.md) — An Empty state screen is used to prompt the user to take action or provide input when there is no existing data or content to display. (https://doc.ux4g.gov.in/web/?path=/story/ux4g-components-empty-state--introduction)
- [Feedback](https://doc.ux4g.gov.in/web/llms/components/feedback.md) — Feedback allows users to provide ratings and share opinions about their experience. It supports multiple feedback formats, including thumbs, stars, NPS, and emoji ratings. (https://doc.ux4g.gov.in/web/?path=/story/ux4g-components-feedback--introduction)
- [File Upload](https://doc.ux4g.gov.in/web/llms/components/file-upload.md) — File upload allows users to upload and attach one or more files. It shows the upload progress and status of each file. (https://doc.ux4g.gov.in/web/?path=/story/ux4g-components-file-upload--introduction)
- [Footer](https://doc.ux4g.gov.in/web/llms/components/footer.md) — Footer provides access to secondary navigation, organizational information, legal links, contact details, and related resources. It serves as the concluding navigation area of a website. (https://doc.ux4g.gov.in/web/?path=/story/ux4g-components-footer--introduction)
- [Form Field](https://doc.ux4g.gov.in/web/llms/components/form-field.md) — Form field group is a container that organizes related input controls like text boxes, dropdowns and checkboxes into logical sections. It structures long, complex forms to improve the user experience and allows developers to apply styles, validation rules or visibility conditions to multiple fields at once. (https://doc.ux4g.gov.in/web/?path=/story/ux4g-components-form-field--introduction)
- [Image](https://doc.ux4g.gov.in/web/llms/components/image.md) — Image component displays photographic or illustrative content in a consistent and responsive manner. It supports configurable aspect ratios, corner styles, and overlays to maintain visual consistency across interfaces. (https://doc.ux4g.gov.in/web/?path=/story/ux4g-components-image--introduction)
- [Input Pan-Card](https://doc.ux4g.gov.in/web/llms/components/input-pan-card.md) — Input - Pan Card allows users to enter, format and validate a Permanent Account Number (PAN). It supports standardized data entry across financial, taxation, and banking workflows. (https://doc.ux4g.gov.in/web/?path=/story/ux4g-components-input-pan-card--introduction)
- [Input Aadhaar](https://doc.ux4g.gov.in/web/llms/components/input-aadhaar.md) — Input-Aadhaar field allow users to securely enter, format and validate their 12-digit unique identification number. They support user interaction by enabling standardized data entry in identity verification, government applications and secure onboarding workflows, ensuring a smooth and compliant user experience. (https://doc.ux4g.gov.in/web/?path=/story/ux4g-components-input-aadhaar--introduction)
- [Input](https://doc.ux4g.gov.in/web/llms/components/input.md) — Input - Text Field allow users to enter, edit and submit information such as names, emails, passwords or search queries. They support user interaction by enabling data input in forms, searches and workflows, ensuring a smooth and efficient user experience. (https://doc.ux4g.gov.in/web/?path=/story/ux4g-components-input--introduction)
- [Journey Timeline](https://doc.ux4g.gov.in/web/llms/components/journey-timeline.md) — A composite component combining a Stepper (progress indicators) with an Info List (content items) to visualise multi-step processes, application statuses, and service journeys. (https://doc.ux4g.gov.in/web/?path=/story/ux4g-components-journey-timeline--introduction)
- [Link](https://doc.ux4g.gov.in/web/llms/components/link.md) — A link is an interactive, clickable element, usually text or an icon, that directs users to another page, website, or a specific section within the same page, acting as a fundamental tool for navigation and accessing more information (https://doc.ux4g.gov.in/web/?path=/story/ux4g-components-link--introduction)
- [List](https://doc.ux4g.gov.in/web/llms/components/list.md) — A list is a component used to organize and display a continuous collection of related items in a structured, scannable format (https://doc.ux4g.gov.in/web/?path=/story/ux4g-components-list--introduction)
- [Mega Menu](https://doc.ux4g.gov.in/web/llms/components/mega-menu.md) — Mega menus dropdown menus that appear when users hover or click on a navigation option. They are typically seen on websites with a wide range of content and categories. Mega menus are particularly useful in UX design as they can provide an overview of all available options within a site\'s complex information architecture. (https://doc.ux4g.gov.in/web/?path=/story/ux4g-components-mega-menu--introduction)
- [Modal](https://doc.ux4g.gov.in/web/llms/components/modal.md) — Modal component displays important information, confirmations, or actions in a focused overlay above the main interface. It requires user interaction before returning to the underlying content. (https://doc.ux4g.gov.in/web/?path=/story/ux4g-components-modal--introduction)
- [Navbar](https://doc.ux4g.gov.in/web/llms/components/navbar.md) — Navbar provides primary navigation and access to key areas of an application or website. It supports branding, navigation, and important user actions. (https://doc.ux4g.gov.in/web/?path=/story/ux4g-components-navbar--introduction)
- [Input-OTP](https://doc.ux4g.gov.in/web/llms/components/input-otp.md) — Input - OTP component consists of multiple input fields designed for entering a one-time password. It automatically advances focus between fields and provides clear feedback for a secure and seamless verification experience. (https://doc.ux4g.gov.in/web/?path=/story/ux4g-components-input-otp--introduction)
- [Pagination](https://doc.ux4g.gov.in/web/llms/components/pagination.md) — Pagination divides large datasets into manageable pages, allowing users to navigate through information efficiently. It enhances performance, readability, and user experience in lists, tables, and search results. here. (https://doc.ux4g.gov.in/web/?path=/story/ux4g-components-pagination--introduction)
- [Popover](https://doc.ux4g.gov.in/web/llms/components/popover.md) — Popover displays additional information or actions in a lightweight overlay triggered by user interaction. It can contain interactive content such as buttons, links, and form controls. (https://doc.ux4g.gov.in/web/?path=/story/ux4g-components-popover--introduction)
- [Progress Indicator](https://doc.ux4g.gov.in/web/llms/components/progress-indicator.md) — Progress indicators inform users about the status of ongoing processes by providing visual feedback about the progress of a task or operation. It is commonly seen in design patterns like: File uploads, Password strength etc. (https://doc.ux4g.gov.in/web/?path=/story/ux4g-components-progress-indicator--introduction)
- [Radio](https://doc.ux4g.gov.in/web/llms/components/radio.md) — Radio Button presents a list of mutually exclusive options where users can make exactly one selection from the group. It supports user interaction by allowing the selection of a single choice out of multiple predefined items, ensuring that users can easily define precise preferences, answer single choice binary questions, and submit forms with distinct clarity. (https://doc.ux4g.gov.in/web/?path=/story/ux4g-components-radio--introduction)
- [Result List](https://doc.ux4g.gov.in/web/llms/components/result-list.md) — A Result List Row displays a single item within a list of search results, records, or data entries. It presents key information in a structured format, enabling users to quickly scan, compare, and access relevant details or actions. (https://doc.ux4g.gov.in/web/?path=/story/ux4g-components-result-list--introduction)
- [Search](https://doc.ux4g.gov.in/web/llms/components/search.md) — Search component allows users to quickly find relevant information within an application. It enhances navigation, improves content discoverability and supports text based, voice or filter-assisted search functionality. (https://doc.ux4g.gov.in/web/?path=/story/ux4g-components-search--introduction)
- [Progress SLA Indicator](https://doc.ux4g.gov.in/web/llms/components/progress-sla-indicator.md) — An SLA progress indicator visually tracks the time remaining to fulfill a guaranteed service or task. It communicates progress and status through color and supporting information. (https://doc.ux4g.gov.in/web/?path=/story/ux4g-components-progress-sla-indicator--introduction)
- [Slider](https://doc.ux4g.gov.in/web/llms/components/slider.md) — Slider is an interactive input control that allows users to select a value or a range of values by dragging a handle along a horizontal track. It provides an intuitive, visually appealing way to adjust continuous settings or explore approximate ranges. (https://doc.ux4g.gov.in/web/?path=/story/ux4g-components-slider--introduction)
- [Spinner](https://doc.ux4g.gov.in/web/llms/components/spinner.md) — Spinner component is a visual indicator used to represent loading, processing or system activity. It provides feedback to users that an operation is in progress and helps prevent confusion when waiting for content to load. (https://doc.ux4g.gov.in/web/?path=/story/ux4g-components-spinner--introduction)
- [Status Pipeline](https://doc.ux4g.gov.in/web/llms/components/status-pipeline.md) — A Status Pipeline is a UI component that communicates the progression of a multi-step process. It enables users to easily identify completed, current, and upcoming stages, improving clarity and navigation through sequential workflows. The component is available in horizontal and vertical variants, allowing it to adapt to different layouts and use cases. (https://doc.ux4g.gov.in/web/?path=/story/ux4g-components-status-pipeline--introduction)
- [Stepper](https://doc.ux4g.gov.in/web/llms/components/stepper.md) — Stepper visually represents a multi-step process, guiding users through a sequence of actions. It enhances usability by breaking down complex workflows into manageable steps. (https://doc.ux4g.gov.in/web/?path=/story/ux4g-components-stepper--stepper-horizontal)
- [Tab](https://doc.ux4g.gov.in/web/llms/components/tab.md) — Tabs organize related content into separate sections, allowing users to switch between views within the same page without navigating away. They help improve content discoverability, reduce visual clutter, and provide a structured browsing experience. (https://doc.ux4g.gov.in/web/?path=/story/ux4g-components-tab--introduction)
- [Table](https://doc.ux4g.gov.in/web/llms/components/table.md) — Tables are structured grid components that organize large amounts of raw information into horizontal rows and vertical columns. They are designed to let users quickly scan, sort, compare and take action on complex data sets. (https://doc.ux4g.gov.in/web/?path=/story/ux4g-components-table--introduction)
- [Tags](https://doc.ux4g.gov.in/web/llms/components/tags.md) — Tag is a small, interactive element used to label, categorize or filter content. Tag allow users to quickly identify metadata and make selections. (https://doc.ux4g.gov.in/web/?path=/story/ux4g-components-tags--introduction)
- [Textarea](https://doc.ux4g.gov.in/web/llms/components/textarea.md) — Textareas support longer-form text entry with helper messaging, counters, and validation states. (https://doc.ux4g.gov.in/web/?path=/story/ux4g-components-textarea--introduction)
- [Time Slot](https://doc.ux4g.gov.in/web/llms/components/time-slot.md) — A Time Slot represents a specific period available for scheduling, booking, or appointments. It helps users select a convenient date and time, ensuring organized planning and efficient allocation of resources. (https://doc.ux4g.gov.in/web/?path=/story/ux4g-components-time-slot--introduction)
- [Switch](https://doc.ux4g.gov.in/web/llms/components/switch.md) — Toggle component allows users to switch between two states typically representing on/off, enabled/disabled, or active/inactive settings. Toggles provide a quick and intuitive way to modify system or feature preferences with a single action. (https://doc.ux4g.gov.in/web/?path=/story/ux4g-components-switch--introduction)
- [Tooltip](https://doc.ux4g.gov.in/web/llms/components/tooltip.md) — Tooltip is a small, contextual popup that appears when you hover over, tap or focus on a UI element (like a button or icon). It provides quick explanatory text or a hint about the element\'s function without permanently cluttering the screen. (https://doc.ux4g.gov.in/web/?path=/story/ux4g-components-tooltip--introduction)