Coral.Autocomplete

Coral.AnchorList

Coral.AnchorButton

Coral.ColumnView

English Français Document

Coral.ColorInput

Coral.ButtonGroup

Coral.Dialog

Coral.Checkbox

Coral.List

Community
What's new in CoralUI
CoralUI Status

Coral.Card

Image Girl's Eyes 3 4
Collection Asset Collection

Coral.ButtonList

Coral.Icon

Coral.Overlay

A generic overlay component.

Coral.Progress

Coral.SelectList

Africa America Asia Europe Oceania

Coral.StepList

Step 1 Step 2 Step 3

Coral.TabList

A Coral.TabList is used within a Coral.TabView to control a Coral.PanelStack which creates a typical 'Tabs' UI pattern.

Tab 1 Tab 2

Coral.TabView

A Coral.TabView is used with a Coral.TabList and a Coral.PanelStack to create a 'tabs' UI pattern.

Tab 1 Tab 2 Tab1: Lorem ipsum dolor sit amet.

Coral.Tag

Tag

Coral.Textfield

Coral.Tooltip

Hover Me

Coral.Wait

Coral.Alert

SuccessThis is an alert.

Coral.CharacterCount

0

Coral.Accordion

An accordion consists of multiple collapsibles. When one collapsible in the accordion is expanded, the others are collapsed.

Coral.ActionBar

Coral.Calendar

Calendar depicts a navigable calendar that can show a selected date, and have the client select another date. Please note that for the `next` and `previous` month buttons to show properly, the embedding document is required to have set in its tag.

March 2025
Su Mo Tu We Th Fr Sa
23 24 25 26 27 28 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31 1 2 3 4 5
Today, Saturday, March 8, 2025

Coral.Clock

Clock allows the user to choose a time using the 24h format.

:

Coral.Button

Coral.Datepicker

The Datepicker component provides desktop and touch friendly for both date and time selection. The component leverages moment.js for parsing, manipulating, and formatting dates.

Coral.CycleButton

Card View List View Column View

Coral.Drawer

A drawer displays some content (hidden by default) that can be opened and closed with a sliding animation.

Coral.DragAction

 
You can drag me around

Coral.Multifield

Coral.FileUpload

Coral.PanelStack

A Coral.PanelStack wraps content, keeping only the selected content in view. See the documentation for a working example.

Panel 1: This is the content of Panel 1. There are more coral-Panels defined in the PanelStack!

Coral.Masonry

Item 1 Item 2

Coral.NumberInput

Coral.Popover

Coral.Select

Actions InfoCircle Check Add

Coral.QuickActions

Breakfast Lunch Dinner
Cereals Hot Dogs Baked Salmon
Toast Kebab Korean BBQ
Coffee Pasta Beef steak

Coral.Radio

Coral.Search

Search is a touch friendly input control.

Coral.Slider

Coral.Table

Activities Numbers Date
Alpha 23,857 January 28, 2012
Beta 20,398 December 1, 2011
Charlie 3,498 February 15, 2012
Delta 20,398 May 16, 2012

Coral.Textarea

Coral.Switch

Coral.TagList

Tag 1 Tag 2 Tag 3

Coral.WizardView

A Coral.WizardView is used with a Coral.StepList and a Coral.PanelStack to create a 'wizard' UI pattern.

Step 1 Step 2 This is the content of the first step.