Skip to content
LIBRARY

Controls for real applications

Grids, charts, schedulers, editors and more. Every control has its own page in plain language, easy to read for developers and for AI assistants.

RayCraft Complete: data grids, charts, scheduling, workspace, diagrams and Office controls. Coming soon.

ButtonsText And NumbersList SelectionSliders And RatingColor And FileEditorsChoiceDate TimeFormsLayoutNavigationOverlaysFeedbackContentLight DataDragPreferencesUtilities

Buttons 9 controls

001 Button The button your whole app builds on: three styles, six colors, icons, and protection against double clicks.002 IconButton A compact button for toolbars, with an accessible name built in.003 ButtonGroup Join related actions into one tidy control, ready for view switchers.004 ToggleButton A button that stays on or off.005 SplitButton A main action with related actions one click away.006 FloatingActionButton Keep the main action always within reach.007 SpeedDial A floating button that opens a short list of actions.008 ProgressButton A button that shows its own progress while work is running.009 CopyButton One click to copy, with a clear confirmation.

Text And Numbers 9 controls

010 TextField The text box your forms are built on, with validation messages below.011 NumericField Number entry that respects limits and your users' format.012 PercentField Type percentages naturally while the value stays a clean fraction.013 MoneyField Type amounts the way your users write them, in their own culture.014 MaskedInput Guide people to type phone numbers, codes and IDs in the right format.015 OtpInput One box per character for verification codes, with smooth typing and pasting.016 SearchBox Search with an icon, a clear button and your own search action.017 PasswordStrength Show people how strong a password is and which rules it meets.018 InPlaceEditor Edit a value right where it is shown: click, change, save.

List Selection 10 controls

019 Select Choose one item from a drop-down, for any type of value.020 DropDownList Pick from lists of any length, even hundreds of thousands of entries, without slowdowns.021 MultiSelect Choose several items from a drop-down, with Select all and Clear.022 ListBox A list that is always visible, for one choice or several.023 Autocomplete Get people to the right answer faster by narrowing a long list while they type.024 MultiColumnComboBox Search a list that shows several columns at once.025 Cascader Let users choose from a hierarchy, one level at a time.026 DropDownTree Choose one node of a hierarchy from a compact drop-down.027 TagInput Add free-form tags with Enter or a comma.028 Mention Tag colleagues with @ right inside a text box.

Sliders And Rating 5 controls

029 Slider Choose a number by dragging.030 RangeSlider Choose a lower and an upper value with one control.031 RangeSelector Pick an interval of a data series with two handles.032 Rating Collect star ratings with a single click.033 RatingDisplay Show ratings with half stars, a score and a review count.

Color And File 5 controls

034 ColorPicker Let users choose colors with a picker, a hex code or ready presets.035 ColorPalette A grid of swatches that is quick to scan and easy to use with the keyboard.036 ColorButton A familiar toolbar color button that always shows the chosen color.037 FileUpload Drag and drop or pick files, with size and type checks built in.038 SignaturePad Collect handwritten signatures with a mouse, finger or pen.

Editors 2 controls

039 MarkdownEditor Write Markdown with a toolbar and a live preview.040 AddressField Let people address a message in seconds: every address becomes a clear chip, with suggestions as they type.

Choice 9 controls

041 Checkbox A simple yes or no that works with your forms and validation.042 CheckboxGroup Let users pick several items from a list, clearly labelled.043 Radio A single option of a radio group, for when each choice needs its own label or content.044 RadioGroup One clear choice from a short list.045 Switch A clear on and off toggle.046 Chip Compact labels for tags and filters, removable when you need it.047 ChipSet Turn chips into filters people can select, one or several at a time.048 ToggleGroup A segmented control for view switchers and choices.049 TransferList Move items between two lists to choose a subset.

Date Time 12 controls

050 Calendar A calendar that fits right into your pages, in your users' language.051 DatePicker Pick a date from a calendar, in the language and format your users know.052 DateTimePicker Choose a date and time in one field.053 DateTimeRangePicker Select a period on one calendar showing two months, with quick ranges.054 MonthPicker Choose a month and year without picking a day.055 YearPicker Choose a year from a clear grid.056 WeekPicker Choose a whole week in one click.057 TimeField A time box in the format of the user's language.058 TimePicker Enter a time in the format your users expect.059 TimeRangePicker Choose a start and an end time in one field.060 TimeSpanPicker Enter a duration in days, hours, minutes and seconds.061 EventCalendar A month view with events that people can read at a glance.

Forms 7 controls

062 ErrorSummary Collect every form error in one clear place.063 FormLayout Arrange labels and fields in a responsive grid with titled sections.064 FormState Lock or freeze a whole form with a single setting.065 LoginForm A ready sign-in form with friendly validation.066 RegisterForm A ready registration form with friendly validation.067 Captcha A light first check against simple bots, with no external service.068 FormBuilder Build forms from a list of field definitions instead of markup.

Layout 15 controls

069 Container Keep content at a comfortable width on every screen.070 Stack Lay out items in a row or column with even spacing.071 Grid A 12-column grid that changes with the screen size.072 GridItem One cell of the grid, with its width for every screen size set by a few simple values.073 Spacer Push items to the far end of a row.074 Divider A thin line that gives content room to breathe.075 Card A clean container that groups related content with a header and footer.076 Panel A titled section that can collapse and carry its own actions.077 Fieldset Group related fields under a clear heading.078 Toolbar A row of tools, ready for the keyboard.079 Splitter Resizable panes that users can adjust by mouse, touch or keyboard.080 Accordion Keep long pages tidy: show one section at a time, or several if your users prefer.081 Collapse Show details only when users ask for them.082 TagCloud Show words in sizes that follow their importance.083 TitleIndex A list grouped by first letter with a quick letter bar.

Navigation 19 controls

084 AppBar A clean top bar that adapts from wide desktops to small phones.085 Drawer A side panel for navigation or details that stays out of the way.086 NavMenu Vertical navigation that highlights the current page.087 NavItem One link in the navigation menu, with an icon and a label, highlighted when its page is open.088 NavGroup A collapsible group of links in the navigation menu, so long menus stay easy to scan.089 Tabs Organize content into panels users can switch between.090 Stepper Guide users through a process one step at a time.091 Wizard Guide users through a process with steps that can be checked or skipped.092 Breadcrumbs Always show where the user is and give a one-click way back.093 Menu A button that opens a clear list of actions.094 MenuItem One entry in a menu, with an optional icon, ready for the keyboard and the mouse.095 ContextMenu Put the right actions under the right mouse button.096 MenuBar A classic application menu bar with shortcuts and submenus.097 CommandContextMenu Right-click menus with shortcuts, check marks and submenus, built from one list of commands.098 TextContextMenu A familiar right-click menu for text fields.099 ProfileMenu Show the signed-in user with an avatar, name and menu.100 Pagination Move through long lists page by page.101 TreeView Hierarchies that are easy to browse by keyboard or mouse.102 ScrollSpy A contents list that follows the reader through a long page.

Overlays 10 controls

103 Dialog Focused dialogs that keep users on track and work with the keyboard.104 DialogHost The place where dialogs appear.105 Popover A floating panel for extra detail, close at hand.106 Tooltip A short hint on hover or focus, without a script.107 Overlay Dim the page to focus attention.108 Lightbox A full-screen viewer for images, with previous and next buttons, arrow keys and Escape.109 Tour Guide new users through your app step by step.110 ColorDialog Ask the user for a color in a ready dialog, in one line of code.111 FontDialog Ask the user for a font in a ready dialog, in one line of code.112 SnackbarHost The place where short messages appear.

Feedback 12 controls

113 Alert Say what matters, in the right tone: clear messages for success, warnings and errors.114 Badge A small status label that makes state obvious in lists and menus.115 BusyOverlay Keep users informed while something loads, and stop accidental clicks.116 CookieConsent Ask for cookie choices politely and remember the answer.117 EmptyState Turn an empty page into a helpful next step.118 NotificationCenter A bell with an unread count and a panel of notifications.119 ProgressBar Show how far along something is.120 ProgressCircular A ring that shows progress at a glance.121 ResultPage Tell users how it went: success, error, not found or no access.122 Skeleton Placeholders that make loading feel quicker.123 SkeletonPreset Ready-made loading placeholders for cards, lists, tables and profiles.124 Spinner A clear sign that something is loading.

Content 21 controls

125 Typography Headings and text that stay consistent across your app.126 Icon A consistent library of icons in one clean style.127 Image Images with required alternative text, captions and lazy loading.128 ImageGallery A thumbnail grid that opens into a full-screen viewer.129 Avatar Put a face or initials next to every name and make lists feel personal.130 AvatarGroup Show a whole team in a small space, with a simple +n for the rest.131 Link Links that look right and handle external addresses safely.132 Statistic Big numbers with a label and trend, built for dashboards.133 Descriptions Show the details of a record in a neat grid that fits small screens too.134 Timeline Tell the story of a record as a vertical sequence of events.135 Carousel Present highlights as slides, with controls people can pause.136 Countdown Count down to a launch, a deadline or an offer.137 Highlighter Mark search matches inside text so users find them instantly.138 Marquee A scrolling strip for short announcements that users can pause.139 CodeBlock Show code readably, with light syntax coloring.140 Markdown Display Markdown text beautifully, with safe handling of links and HTML.141 QrCode Create QR codes in your page, with no image service.142 Barcode Print scannable barcodes straight from your app, no image service needed.143 PricingTable Plan cards with prices, features and a monthly or yearly switch.144 CommentThread Add discussions to any record, with replies and a box for new comments.145 ActivityFeed Show who did what and when, grouped by day, so teams always know what changed.

Light Data 5 controls

146 Table A neat table for simple, static data.147 List Lists with icons, two lines of text and actions on each row.148 Repeater Show a list with your own template, header and empty message.149 VirtualList Scroll hundreds of thousands of items smoothly.150 PropertyGrid Edit the properties of any object in a tidy grouped list.

Drag 1 controls

151 Sortable Let users reorder a list by dragging or with buttons.

Preferences 4 controls

152 ThemeToggle Switch between light and dark themes with one click.153 ThemeMenu Let users pick a theme and density from one menu.154 DensityToggle Let users choose between the comfortable and compact density of the whole application.155 LanguageToggle Switch the language of the whole interface, English or Bulgarian, with one control.

Utilities 5 controls

156 BreakpointObserver Build layouts that react to the screen size with a single, simple signal.157 Fullscreen Let users enlarge charts, images or editors to the full screen.158 Hotkey Add keyboard shortcuts that power users will love.159 InfiniteScroll Load more content as the reader reaches the end of a list.160 ScrollToTop A button that takes readers back to the top.

Ready to build with RayCraft?

Start free, or tell us about your project.

Get started free