A rich-text notepad that looks like paper: handwriting on ruled lines, a formatting toolbar over the selection, checklists and tear-off pages.
Attributes
Name
Type
Default
Description
value
string
—
The page, in the notepad Markdown dialect: one line per line, - [ ] checklist items, **bold**, *italic*, ~~strike~~, ==highlight==, <u>, <span data-ink> and <mark data-color>.
name
string
—
Name submitted with the form.
label
string
—
Accessible name of the writing surface.
aria-label
string | null
null
Accessible name forwarded from the host.
placeholder
string
—
Text written in faint pencil while the page is empty.
disabled
boolean
false
Prevents editing and removes the notepad from keyboard navigation.
readonly
boolean
false
Prevents editing while allowing selection.
required
boolean
false
Requires some text for form validation.
maxlength
number
-1
Maximum number of characters of plain text; -1 means unlimited.
no-images
boolean
false
Turns images off: a pasted or dropped image is ignored, and one in pasted HTML is left out.
error
boolean
false
Shows the error margin and error note.
error-text
string
—
Note written in red pen when error is set.
toolbar
'auto' | 'none'
auto
auto opens the formatting toolbar over a selection; none keeps the keyboard shortcuts and hides it.
marks
string
—
Space-separated formats the writer may apply (bold italic underline strike ink highlight). Pasted formatting outside the list is dropped. Empty allows all.
tearable
boolean
false
Adds a perforated top edge with a "Tear off" button and a stack of sheets underneath.
page
number
1
Number of the current page; it goes up by one each time a page is torn off.
pad
NotepadPad
notebook
Kind of pad: notebook, legal, sticky or index-card. Each is a preset of the paper's CSS variables. The writer changes it through the paper picker.
paper
NotepadPaper
lined
Ruling of the page: lined, grid, dot or blank. The writer changes it through the paper picker.
paper-color
NotepadPaperColor
default
Colour of the page and its ink: default, yellow, green, blue, pink or night. The writer changes it through the paper picker.
inks
NotepadColor[] | undefined
—
The inks of the toolbar: each entry a CSS colour (var() included), or { value, name } to give its swatch a
friendly name ({ "value": "#b91c1c", "name": "Alert" }); without one it is called Ink 2. The page stores an ink
by its 1-based position in this list (<span data-ink="2">), so give a dark theme a list of the same length and
order and the whole page recolours. Unset, the four documented --c2-notepad__ink-* inks, named in the notepad's
language (Blue ink, Encre bleue, …); the Ink 2 of an unnamed entry is translated too. A list you give is used
as given, names included: its contrast on the paper is yours to choose.
highlights
NotepadColor[] | undefined
—
The highlighters of the toolbar, as colours or { value, name } entries, stored by position like inks. ==text== is the first one. Unset, the three documented --c2-notepad__highlight-* highlighters, named in the notepad's language.
paper-picker
boolean
false
Adds a "Paper" button to the top of the sheet, which lets the writer choose the pad, the ruling and the paper colour.
actions-placement
NotepadActionsPlacement
start
Side of the "Paper" and "Tear off" buttons the actions slot sits on: start (before them, the default) or end (after them). The keyboard order follows.
Slots
Name
Description
header
Printed heading at the top of the sheet, e.g. a title or a date.
margin
Content placed in the left margin column, such as a badge or a doodle.
toolbar
Extra buttons appended to the selection toolbar.
actions
Buttons at the top of the sheet, in the row of the "Paper" and "Tear off" buttons, e.g. a delete or a share button for the note. actions-placement puts them before (default) or after those buttons. A slotted c2-icon-button is shrunk to the height of that row.
Events
Name
Type
Description
page-tear
CustomEvent<NotepadPageTearEventDetail>
Fired before a page is torn off; cancel it to keep the page. Does not bubble.
change
Event
Fired when the notepad loses focus after its value changed, and after a page is torn off.
input
Event
Fired on each edit, after value is updated.
check-change
CustomEvent<NotepadCheckChangeEventDetail>
Fired when a checklist item is ticked or unticked. Does not bubble.
format-change
CustomEvent<NotepadFormat>
Fired when the formatting at the selection changes. Does not bubble.
paper-change
CustomEvent<NotepadPaperChangeEventDetail>
Fired when the writer picks another pad, ruling or paper colour in the paper picker. Does not bubble.
image-error
CustomEvent<{ error: unknown }>
A pasted or dropped image could not be saved: imageUpload rejected. Its image is removed, but a pasted web image keeps its address. Does not bubble.
CSS parts
Shadow DOM styling hooks used with ::part(name). Prefer CSS custom properties when they cover the change.
Name
Description
sheet
The paper sheet.
writing
The editable writing surface.
toolbar
The selection formatting toolbar.
tear-button
The "Tear off" button of a tearable pad.
paper-button
The "Paper" button that opens the paper picker.
paper-menu
The paper picker: pads, rulings and paper colours.
actions
Wrapper of the actions slot; assigned buttons keep their own styles.
CSS custom properties
Grouped by semantic target and state from --c2-<component>__<target>__<state>--<property>. Click a group to collapse it; click a name to copy it.
Past this height the page scrolls; the rules scroll with it.
--c2-notepad__sheet--rotate
angle
0deg
Tilt of the sheet. A sticky note leans by a random angle (1°–4° either way, picked again each time the pad becomes a sticky note) unless this is set; 0deg keeps it straight.
Glued top binding of a legal pad; block to show it.
--c2-notepad__glue--background
color
#3f444b
c2-notepad > top
--c2-notepad__top--padding-top
pixel
20px
Space above the header row, which clears the spiral binding.
c2-notepad > pad
--c2-notepad__pad--padding-top
pixel
12px
Space above the sheet, where the spiral's coils stand. The legal pad, the sticky note and the index card, which have no spiral, set it to 0, so their sheet starts at the top of the element; set it to 0 too when you hide the spiral of a notebook.
--c2-notepad__pad--padding-bottom
pixel
0px
Space under the sheet. A tearable pad sets it to 8px, where the sheets underneath show; set it to 0 with --c2-notepad__stack--display: none.
c2-notepad > stack
--c2-notepad__stack--display
display
block
Sheets drawn under the page of a tearable pad; none to show the page alone.
c2-notepad > controls
--c2-notepad__controls--opacity
opacity
1
Opacity of the "Paper" button, the "Tear off" button and the actions slot while the notepad is neither hovered nor focused. Set it to 0 to show them only on the note being pointed at or written in (on a touch screen, once the writer taps into it), and while the paper picker is open.
c2-notepad > ink-blue
--c2-notepad__ink-blue--color
color
#2848b8
c2-notepad > ink-black
--c2-notepad__ink-black--color
color
#18181b
c2-notepad > ink-red
--c2-notepad__ink-red--color
color
#b8232b
c2-notepad > ink-green
--c2-notepad__ink-green--color
color
#22743a
c2-notepad > highlight-yellow
--c2-notepad__highlight-yellow--background
color
rgba(255, 214, 64, 0.55)
c2-notepad > highlight-green
--c2-notepad__highlight-green--background
color
rgba(110, 220, 120, 0.4)
c2-notepad > highlight-pink
--c2-notepad__highlight-pink--background
color
rgba(255, 120, 170, 0.38)
c2-notepad > task
c2-notepad > task > checked
--c2-notepad__task__checked--opacity
number
0.55
Opacity of a ticked checklist item.
c2-notepad > image
--c2-notepad__image--border-radius
border-radius
2px
c2-notepad > image > selected
--c2-notepad__image__selected--outline
outline
2px solid rgba(2, 101, 220, 0.7)
Around a selected image.
c2-notepad > image-handle
--c2-notepad__image-handle--background
color
rgb(2, 101, 220)
The resize handle of a selected image.
c2-notepad > image-missing
--c2-notepad__image-missing--background
color
rgba(60, 50, 30, 0.08)
Placeholder of an image that cannot be drawn on this device.
c2-notepad > toolbar
--c2-notepad__toolbar--background
color
—
The washi tape of the selection toolbar and the paper picker. Unset, it is cut from the page's paper, a shade towards its ink, so it follows the paper colour; set it for one tape on every paper.
--c2-notepad__toolbar--color
color
—
Text and icons on the tape. Unset, the page's ink.
c2-notepad > toolbar > button
c2-notepad > toolbar > button > active
--c2-notepad__toolbar__button__active--background
color
rgba(60, 50, 30, 0.14)
c2-notepad > perforation
--c2-notepad__perforation--color
color
#b9bfc8
Perforated line of a tearable pad.
c2-notepad > paper-yellow
--c2-notepad__paper-yellow--background
color
#fcf0bf
Sheet colour for paper-color="yellow".
--c2-notepad__paper-yellow--color
color
#2b2410
Ink colour for paper-color="yellow".
c2-notepad > paper-green
--c2-notepad__paper-green--background
color
#e8f3e4
Sheet colour for paper-color="green".
--c2-notepad__paper-green--color
color
#1d3324
Ink colour for paper-color="green".
c2-notepad > paper-blue
--c2-notepad__paper-blue--background
color
#e6eef9
Sheet colour for paper-color="blue".
--c2-notepad__paper-blue--color
color
#1c2a4a
Ink colour for paper-color="blue".
c2-notepad > paper-pink
--c2-notepad__paper-pink--background
color
#fbe6ea
Sheet colour for paper-color="pink".
--c2-notepad__paper-pink--color
color
#3d1f2b
Ink colour for paper-color="pink".
c2-notepad > paper-night
--c2-notepad__paper-night--background
color
#232a33
Sheet colour for paper-color="night".
--c2-notepad__paper-night--color
color
#e9e4d4
Ink colour for paper-color="night".
c2-notepad > pad-legal
--c2-notepad__pad-legal--background
color
#fbf1a6
Sheet colour of pad="legal".
c2-notepad > pad-sticky
--c2-notepad__pad-sticky--background
color
#ffe680
Sheet colour of pad="sticky".
c2-notepad > pad-index-card
--c2-notepad__pad-index-card--background
color
#ffffff
Sheet colour of pad="index-card".
c2-notepad > error
--c2-notepad__error--color
color
#dc2626
Error note and margin of an invalid notepad.
c2-notepad > focus
--c2-notepad__focus--outline
outline
2px solid rgba(2, 101, 220, 0.4)
c2-notepad > disabled
--c2-notepad__disabled--opacity
opacity
0.38
c2-notepad > tear
--c2-notepad__tear--duration
time
700ms
Length of the tear-off animation.
Text and languages
The text the component shows, in English. It shows another language when the app adds one with addTranslations, under notepad, and the nearest lang asks for it; any message not translated stays in English. {0}, {1}… stand for the values a message carries. Languages guide.
Key
English
Values
padNotebook
Notebook
—
padLegal
Legal pad
—
padSticky
Sticky note
—
padIndexCard
Index card
—
colorNotebook
White
—
colorLegal
Canary
—
colorSticky
Lemon
—
colorIndexCard
Card
—
colorYellow
Yellow
—
colorGreen
Green
—
colorBlue
Blue
—
colorPink
Pink
—
colorNight
Night
—
paperLined
Lined
—
paperGrid
Grid
—
paperDot
Dot grid
—
paperBlank
Blank
—
paper
Paper
—
paperColors
Paper
—
pad
Pad
—
lines
Lines
—
tearOff
Tear off
—
done
Done
—
resizeImage
Drag to resize, double-click for the natural size (Alt+← and Alt+→ on a selected image)
—
imageMissing
Image not available on this device
—
imageSaving
Saving image…
—
valueMissing
Please write something.
—
tooLong
Please use at most {0} characters.
{0} max
formatting
Formatting
—
bold
Bold
—
italic
Italic
—
underline
Underline
—
strikethrough
Strikethrough
—
inkColor
Ink colour
—
highlighter
Highlighter
—
colorButton
{0}: {1}
{0} group {1} current
inkColors
Ink colours
—
highlighters
Highlighters
—
defaultInk
Default ink
—
noHighlighter
No highlighter
—
inkBlue
Blue ink
—
inkBlack
Black ink
—
inkRed
Red ink
—
inkGreen
Green ink
—
highlightYellow
Yellow highlighter
—
highlightGreen
Green highlighter
—
highlightPink
Pink highlighter
—
inkN
Ink {0}
{0} position
highlighterN
Highlighter {0}
{0} position
Notepad
A rich-text notepad that looks like paper: handwriting on ruled lines, a formatting toolbar over the selection, checklists and tear-off pages.
Attributes
Name
Type
Default
Description
value
string
—
The page, in the notepad Markdown dialect: one line per line, - [ ] checklist items, **bold**, *italic*, ~~strike~~, ==highlight==, <u>, <span data-ink> and <mark data-color>.
name
string
—
Name submitted with the form.
label
string
—
Accessible name of the writing surface.
aria-label
string | null
null
Accessible name forwarded from the host.
placeholder
string
—
Text written in faint pencil while the page is empty.
disabled
boolean
false
Prevents editing and removes the notepad from keyboard navigation.
readonly
boolean
false
Prevents editing while allowing selection.
required
boolean
false
Requires some text for form validation.
maxlength
number
-1
Maximum number of characters of plain text; -1 means unlimited.
no-images
boolean
false
Turns images off: a pasted or dropped image is ignored, and one in pasted HTML is left out.
error
boolean
false
Shows the error margin and error note.
error-text
string
—
Note written in red pen when error is set.
toolbar
'auto' | 'none'
auto
auto opens the formatting toolbar over a selection; none keeps the keyboard shortcuts and hides it.
marks
string
—
Space-separated formats the writer may apply (bold italic underline strike ink highlight). Pasted formatting outside the list is dropped. Empty allows all.
tearable
boolean
false
Adds a perforated top edge with a "Tear off" button and a stack of sheets underneath.
page
number
1
Number of the current page; it goes up by one each time a page is torn off.
pad
NotepadPad
notebook
Kind of pad: notebook, legal, sticky or index-card. Each is a preset of the paper's CSS variables. The writer changes it through the paper picker.
paper
NotepadPaper
lined
Ruling of the page: lined, grid, dot or blank. The writer changes it through the paper picker.
paper-color
NotepadPaperColor
default
Colour of the page and its ink: default, yellow, green, blue, pink or night. The writer changes it through the paper picker.
inks
NotepadColor[] | undefined
—
The inks of the toolbar: each entry a CSS colour (var() included), or { value, name } to give its swatch a
friendly name ({ "value": "#b91c1c", "name": "Alert" }); without one it is called Ink 2. The page stores an ink
by its 1-based position in this list (<span data-ink="2">), so give a dark theme a list of the same length and
order and the whole page recolours. Unset, the four documented --c2-notepad__ink-* inks, named in the notepad's
language (Blue ink, Encre bleue, …); the Ink 2 of an unnamed entry is translated too. A list you give is used
as given, names included: its contrast on the paper is yours to choose.
highlights
NotepadColor[] | undefined
—
The highlighters of the toolbar, as colours or { value, name } entries, stored by position like inks. ==text== is the first one. Unset, the three documented --c2-notepad__highlight-* highlighters, named in the notepad's language.
paper-picker
boolean
false
Adds a "Paper" button to the top of the sheet, which lets the writer choose the pad, the ruling and the paper colour.
actions-placement
NotepadActionsPlacement
start
Side of the "Paper" and "Tear off" buttons the actions slot sits on: start (before them, the default) or end (after them). The keyboard order follows.
Slots
Name
Description
header
Printed heading at the top of the sheet, e.g. a title or a date.
margin
Content placed in the left margin column, such as a badge or a doodle.
toolbar
Extra buttons appended to the selection toolbar.
actions
Buttons at the top of the sheet, in the row of the "Paper" and "Tear off" buttons, e.g. a delete or a share button for the note. actions-placement puts them before (default) or after those buttons. A slotted c2-icon-button is shrunk to the height of that row.
Events
Name
Type
Description
page-tear
CustomEvent<NotepadPageTearEventDetail>
Fired before a page is torn off; cancel it to keep the page. Does not bubble.
change
Event
Fired when the notepad loses focus after its value changed, and after a page is torn off.
input
Event
Fired on each edit, after value is updated.
check-change
CustomEvent<NotepadCheckChangeEventDetail>
Fired when a checklist item is ticked or unticked. Does not bubble.
format-change
CustomEvent<NotepadFormat>
Fired when the formatting at the selection changes. Does not bubble.
paper-change
CustomEvent<NotepadPaperChangeEventDetail>
Fired when the writer picks another pad, ruling or paper colour in the paper picker. Does not bubble.
image-error
CustomEvent<{ error: unknown }>
A pasted or dropped image could not be saved: imageUpload rejected. Its image is removed, but a pasted web image keeps its address. Does not bubble.
CSS parts
Shadow DOM styling hooks used with ::part(name). Prefer CSS custom properties when they cover the change.
Name
Description
sheet
The paper sheet.
writing
The editable writing surface.
toolbar
The selection formatting toolbar.
tear-button
The "Tear off" button of a tearable pad.
paper-button
The "Paper" button that opens the paper picker.
paper-menu
The paper picker: pads, rulings and paper colours.
actions
Wrapper of the actions slot; assigned buttons keep their own styles.
CSS custom properties
Grouped by semantic target and state from --c2-<component>__<target>__<state>--<property>. Click a group to collapse it; click a name to copy it.
Past this height the page scrolls; the rules scroll with it.
--c2-notepad__sheet--rotate
angle
0deg
Tilt of the sheet. A sticky note leans by a random angle (1°–4° either way, picked again each time the pad becomes a sticky note) unless this is set; 0deg keeps it straight.
Glued top binding of a legal pad; block to show it.
--c2-notepad__glue--background
color
#3f444b
c2-notepad > top
--c2-notepad__top--padding-top
pixel
20px
Space above the header row, which clears the spiral binding.
c2-notepad > pad
--c2-notepad__pad--padding-top
pixel
12px
Space above the sheet, where the spiral's coils stand. The legal pad, the sticky note and the index card, which have no spiral, set it to 0, so their sheet starts at the top of the element; set it to 0 too when you hide the spiral of a notebook.
--c2-notepad__pad--padding-bottom
pixel
0px
Space under the sheet. A tearable pad sets it to 8px, where the sheets underneath show; set it to 0 with --c2-notepad__stack--display: none.
c2-notepad > stack
--c2-notepad__stack--display
display
block
Sheets drawn under the page of a tearable pad; none to show the page alone.
c2-notepad > controls
--c2-notepad__controls--opacity
opacity
1
Opacity of the "Paper" button, the "Tear off" button and the actions slot while the notepad is neither hovered nor focused. Set it to 0 to show them only on the note being pointed at or written in (on a touch screen, once the writer taps into it), and while the paper picker is open.
c2-notepad > ink-blue
--c2-notepad__ink-blue--color
color
#2848b8
c2-notepad > ink-black
--c2-notepad__ink-black--color
color
#18181b
c2-notepad > ink-red
--c2-notepad__ink-red--color
color
#b8232b
c2-notepad > ink-green
--c2-notepad__ink-green--color
color
#22743a
c2-notepad > highlight-yellow
--c2-notepad__highlight-yellow--background
color
rgba(255, 214, 64, 0.55)
c2-notepad > highlight-green
--c2-notepad__highlight-green--background
color
rgba(110, 220, 120, 0.4)
c2-notepad > highlight-pink
--c2-notepad__highlight-pink--background
color
rgba(255, 120, 170, 0.38)
c2-notepad > task
c2-notepad > task > checked
--c2-notepad__task__checked--opacity
number
0.55
Opacity of a ticked checklist item.
c2-notepad > image
--c2-notepad__image--border-radius
border-radius
2px
c2-notepad > image > selected
--c2-notepad__image__selected--outline
outline
2px solid rgba(2, 101, 220, 0.7)
Around a selected image.
c2-notepad > image-handle
--c2-notepad__image-handle--background
color
rgb(2, 101, 220)
The resize handle of a selected image.
c2-notepad > image-missing
--c2-notepad__image-missing--background
color
rgba(60, 50, 30, 0.08)
Placeholder of an image that cannot be drawn on this device.
c2-notepad > toolbar
--c2-notepad__toolbar--background
color
—
The washi tape of the selection toolbar and the paper picker. Unset, it is cut from the page's paper, a shade towards its ink, so it follows the paper colour; set it for one tape on every paper.
--c2-notepad__toolbar--color
color
—
Text and icons on the tape. Unset, the page's ink.
c2-notepad > toolbar > button
c2-notepad > toolbar > button > active
--c2-notepad__toolbar__button__active--background
color
rgba(60, 50, 30, 0.14)
c2-notepad > perforation
--c2-notepad__perforation--color
color
#b9bfc8
Perforated line of a tearable pad.
c2-notepad > paper-yellow
--c2-notepad__paper-yellow--background
color
#fcf0bf
Sheet colour for paper-color="yellow".
--c2-notepad__paper-yellow--color
color
#2b2410
Ink colour for paper-color="yellow".
c2-notepad > paper-green
--c2-notepad__paper-green--background
color
#e8f3e4
Sheet colour for paper-color="green".
--c2-notepad__paper-green--color
color
#1d3324
Ink colour for paper-color="green".
c2-notepad > paper-blue
--c2-notepad__paper-blue--background
color
#e6eef9
Sheet colour for paper-color="blue".
--c2-notepad__paper-blue--color
color
#1c2a4a
Ink colour for paper-color="blue".
c2-notepad > paper-pink
--c2-notepad__paper-pink--background
color
#fbe6ea
Sheet colour for paper-color="pink".
--c2-notepad__paper-pink--color
color
#3d1f2b
Ink colour for paper-color="pink".
c2-notepad > paper-night
--c2-notepad__paper-night--background
color
#232a33
Sheet colour for paper-color="night".
--c2-notepad__paper-night--color
color
#e9e4d4
Ink colour for paper-color="night".
c2-notepad > pad-legal
--c2-notepad__pad-legal--background
color
#fbf1a6
Sheet colour of pad="legal".
c2-notepad > pad-sticky
--c2-notepad__pad-sticky--background
color
#ffe680
Sheet colour of pad="sticky".
c2-notepad > pad-index-card
--c2-notepad__pad-index-card--background
color
#ffffff
Sheet colour of pad="index-card".
c2-notepad > error
--c2-notepad__error--color
color
#dc2626
Error note and margin of an invalid notepad.
c2-notepad > focus
--c2-notepad__focus--outline
outline
2px solid rgba(2, 101, 220, 0.4)
c2-notepad > disabled
--c2-notepad__disabled--opacity
opacity
0.38
c2-notepad > tear
--c2-notepad__tear--duration
time
700ms
Length of the tear-off animation.
Text and languages
The text the component shows, in English. It shows another language when the app adds one with addTranslations, under notepad, and the nearest lang asks for it; any message not translated stays in English. {0}, {1}… stand for the values a message carries. Languages guide.
Key
English
Values
padNotebook
Notebook
—
padLegal
Legal pad
—
padSticky
Sticky note
—
padIndexCard
Index card
—
colorNotebook
White
—
colorLegal
Canary
—
colorSticky
Lemon
—
colorIndexCard
Card
—
colorYellow
Yellow
—
colorGreen
Green
—
colorBlue
Blue
—
colorPink
Pink
—
colorNight
Night
—
paperLined
Lined
—
paperGrid
Grid
—
paperDot
Dot grid
—
paperBlank
Blank
—
paper
Paper
—
paperColors
Paper
—
pad
Pad
—
lines
Lines
—
tearOff
Tear off
—
done
Done
—
resizeImage
Drag to resize, double-click for the natural size (Alt+← and Alt+→ on a selected image)
—
imageMissing
Image not available on this device
—
imageSaving
Saving image…
—
valueMissing
Please write something.
—
tooLong
Please use at most {0} characters.
{0} max
formatting
Formatting
—
bold
Bold
—
italic
Italic
—
underline
Underline
—
strikethrough
Strikethrough
—
inkColor
Ink colour
—
highlighter
Highlighter
—
colorButton
{0}: {1}
{0} group {1} current
inkColors
Ink colours
—
highlighters
Highlighters
—
defaultInk
Default ink
—
noHighlighter
No highlighter
—
inkBlue
Blue ink
—
inkBlack
Black ink
—
inkRed
Red ink
—
inkGreen
Green ink
—
highlightYellow
Yellow highlighter
—
highlightGreen
Green highlighter
—
highlightPink
Pink highlighter
—
inkN
Ink {0}
{0} position
highlighterN
Highlighter {0}
{0} position
AccordionConnected, animated panels with shared borders and single or multiple expansion.LayoutAction BarA floating bar for the current selection: the count, the bulk actions and a button that clears it.LayoutApp ShellThe frame of an application: header, navigation, main, an optional details panel, banner and footer, laid out from its own width.LayoutArea chartA line chart with the region under each line filled — every line-chart attribute, plus a fill opacity.ChartAttachmentFile and image attachments with metadata, upload progress, failure states, and actions.Data displayAutocompleteSearchable combobox for local or remote items with customizable list rows.InputsAvatarImage, initials or icon for a person, with status dot and badge.Data displayBadgeTinted pill for status text, counts and dots, optionally pinned to a corner of another element.Data displayBannerA persistent, full-width message in the page flow for system notices, outages and account status.FeedbackBar chartBars over categories or time buckets, with several series drawn side by side within each band.ChartBar ListA ranked list whose rows carry their own bar: top pages, referrers, countries, or the changes between two periods.Data displayBorder BeamA decorative beam that travels around the border of any positioned container.LayoutBottom NavThe mobile tab bar: three to five destinations along the bottom of the screen, each an icon over a short label with a count or dot badge.NavigationBreadcrumbNavigation trail of link buttons with separators, a current page and optional collapsing.NavigationBubble chartAn ECharts scatter plot with a third measure encoded as bubble area, for comparing how two measures relate while showing how much each point weighs.ChartButterfly chartTwo series back to back on a shared category axis, the categories named between them. The population pyramid is the classic case.ChartButtonThemeable button with slots for text, prefix, suffix and running icons.ButtonsButton GroupJoined actions and polished segmented controls with single or multiple selection.ButtonsCandlestick chartAn ECharts OHLC chart for market sessions and other open-close ranges, with semantic positive and negative colours.ChartCardGroups related content and actions on a single bordered surface.LayoutCard InputCard number, expiry date and security code in one field, formatted as the brand prints them and checked as they are typed.InputsCarouselA swipeable slideshow with previous/next controls, indicators, looping and optional autoplay.LayoutCascaderSelect a value from related, multi-level data in one floating panel.InputsChat InputAuto-growing message composer with keyboard submission, toolbar actions and native form support.ChatChat MessageFlexible message row for conversations, assistant answers and activity updates.ChatChat Message ListScrolling conversation log that follows new messages, counts unread ones and loads older history.ChatCheckboxNative checkbox behaviour in a quiet, themeable box with an opt-in hover layer.InputsCheckbox groupCheckboxes grouped into one form control with a value array, a group label and an at-least-one rule.InputsChipA compact pill for a filter, a choice or an entered value: selectable as a toggle, removable with a button or the keyboard.InputsChip GroupA single row of chips or badges that collapses whatever does not fit into a +N indicator, recomputed as the row or its items change size.Data displayChoice MatrixRows × columns of checkboxes or radio buttons in one form control: permissions, notification settings, agreement scales.InputsChord chartFlows between groups around a circle, where one row is one flow from a source to a target.ChartCitationA numbered inline marker that names its source, with a hover preview of the page it cites.ChatCode EditorEditable, syntax-highlighted source field on CodeMirror 6, themed entirely through CSS variables.Editors & viewersCode ViewerSyntax-highlighted code with line numbers, copy button and dark mode, powered by shiki.Editors & viewersColor AreaTwo-dimensional area for picking saturation and value of a colour.InputsColor SelectColour swatch that opens a full picker built from area and slider.InputsColor SliderHorizontal slider for choosing a hue from 0 to 360.InputsCommandA searchable list of commands: type to filter, arrows to highlight, Enter to run. The core of a ⌘K palette.NavigationComparison BarSegmented ratio bar comparing two or three quantities, such as the bid/ask balance of an order book.Data displayConfirm DialogAsks the user to confirm an action: await show() or confirm() for a true/false answer, with a destructive variant and an async confirm action.FeedbackContext MenuA menu opened by right-clicking or long-pressing an area, built from a slotted c2-menu or a render function per clicked spot.NavigationCopy ButtonButton that copies text to the clipboard — the element it sits in, another element by id, or a literal string.ButtonsCountdownTime left until a date, or through a timer, drawn as segments, a clock or a phrase, and kept current to the second.Data displayDashboardGrid of resizable panes, dragged by the edges they share.LayoutDate InputForm-associated single-date input with native picker, constraints, helper text and error states.InputsDate SelectorAccessible one- or two-month calendar for choosing a date range.InputsDate StripA row of days to pick one from, a week at a time, with dots on the days that have something on them.InputsDate Time PickerForm-associated date-and-time field with a calendar and time popup, min/max/step constraints and an IANA time zone.InputsDepth chartCumulative bid and ask size around the mid price of an order book, as trading screens show market depth.ChartDescription ListRead-only label and value pairs for a detail page, in columns that wrap with the available width.Data displayDetailsCollapsible disclosure built on native details and summary.LayoutDiff ViewerRead-only line diff of two texts, unified or side by side, with folded unchanged lines and word highlights.Editors & viewersDistribution BarOne 100% stacked bar of a breakdown, with a legend of shares and the hovered part brought forward.Data displayEmoji PickerA searchable grid of emoji in categories, with skin tones and the emoji used last.InputsFacet ListOne facet of a filter sidebar: an attribute’s values with counts, to include or exclude from a search.InputsFieldsetGroups related controls under a legend, with a description, a group-level error and a disabled state that reaches every control inside.InputsFilter BuilderA filter bar of sentence chips (Status is any of Active), an add-filter picker and an editor for each part; it reports a plain JSON filter tree.InputsFloat ButtonA floating action button for the main action of a screen, which can expand into a speed dial of related actions.ButtonsFlowA pipeline, dependency graph or database schema on a pannable canvas: steps with a status, smooth edges, rows joined row to row, auto layout, draggable nodes saved to localStorage, a hover card and a context menu.Editors & viewersFormForm container with validation timing, an error summary, server errors, dirty tracking and async submit.InputsForm FieldLabel, hint, error, warning and character counter around any form control, wired for assistive technology.InputsFormat DateA date and time formatted for the reader's language and, optionally, a fixed time zone.Data displayFormat NumberA number formatted for its locale: currency, percent, units, compact counts and byte sizes, from Intl.NumberFormat.Data displayGanttA read-only project timeline: tasks, groups, milestones and dependencies on a day, week or month scale.PlanningGauge chartA focused radial KPI gauge drawn by ECharts, with a configurable scale, progress arc and pointer.ChartGoogle MapGoogle Maps with markers, a road route from A to B, and Street View, loaded once per page from a browser key.Data displayHeaderArranges brand, navigation, actions and a mobile trigger in a reusable site shell.LayoutHeatmap chartRows binned into cells by two keys, aggregated, and coloured by a sequential, diverging or stepped scale: a currency matrix, pair × tenor, hour × weekday, or a calendar of days. Drawn by ECharts, with a colour key that counts, marks and filters.ChartHighlightMarks the parts of a text that match a search query.Data displayHover CardInteractive preview card shown when a link or mention is hovered or focused, rendered in the top layer.FeedbackIcon ButtonRound, hoverable button wrapping a slotted SVG icon.ButtonsImageImage with lazy loading, a loading placeholder, an error fallback, click-to-load for untrusted URLs and a full-screen preview.Data displayImage CropperChoose the part of an image to keep by moving and resizing a selection, then read it back as a canvas or a blob.Editors & viewersIndicatorSolid dot or count pinned to an edge or corner of any element, with an accessible name for the count.Data displayInline EditText that turns into a field on click: Enter (Ctrl/⌘+Enter when multiline) commits, Escape cancels, and any control with a value that fires change can be the editor.InputsJSON FormA form generated from a JSON Schema, laid out by the schema, a UI schema or your own markup.InputsJSON ViewerBrowse a JSON value as a collapsible tree, search it, and copy any path or value.Editors & viewersKanbanBoard layout and card movement by pointer or keyboard, with cards drawn by your own renderItem.PlanningKbdKeyboard key label for shortcuts and command hints, with the semantics of the native kbd element.Data displayKey Value EditorEditable KEY=value rows for environment variables and headers: paste a .env file to split it into rows, mask secret values, and flag duplicate or malformed keys.InputsLabelCaption that names and activates the control referenced by its for attribute, with a required marker.InputsLine chartA line chart over a time or numeric x axis, drawn on canvas by uPlot, with series declared as children.ChartLink ButtonText-styled control for link and navigation actions, rendered as a real anchor or a button.NavigationListVertical list container with single or multiple selection.Data displayList ItemSelectable row with icon slots, used on its own or as the option of list and select.Data displayLoading OverlayCovers a region while it loads: the content stays in place, dimmed and blocked, with a spinner and an announced label.FeedbackLog ViewerExplore large logs with variable-height virtual scrolling and sticky tabular attributes.Editors & viewersMap chartA choropleth and point map on vector outlines, drawn by ECharts: regions shaded by a value, with layers of sized points and flow lines, on the bundled world and US maps or your own GeoJSON, TopoJSON or SVG.ChartMarkdownSafe markdown renderer that streams: chat answers and READMEs, with code, math and diagrams.ChatMarkerAn inline marker that highlights, underlines, strikes through, boxes or circles a run of text.Data displayMask InputA text input that fits what is typed to a pattern, for postcodes, IBANs, tax IDs, expiry dates and other fixed formats.InputsMasonryAutomatically pack differently sized dashboard tiles, then move or resize them in edit mode.LayoutMaster DetailA list beside the record it opens, one pane at a time with a Back step when the element is narrow.LayoutMathTeX formulas rendered as native MathML: no font CSS, readable by screen readers, safe for untrusted input.Data displayMenuCommands, links, checkboxes and submenus in a popover anchored to a trigger.NavigationMenubarDesktop-style File, Edit and View menus in one bar, with the arrow-key and hover movement of an application menu bar.NavigationMermaidMermaid text diagrams drawn in your theme colours, loaded on demand and safe for untrusted sources.Data displayMeterA measurement inside a known range — storage, quota, strength — with native meter thresholds and an optional segmented breakdown.Data displayModalDialog built on the native dialog element: focus trap, backdrop, Escape, title, body and footer.FeedbackMoney InputCurrency amount field that groups digits as you type, follows the locale and stores an integer count of minor units.InputsMonth PickerPick a month, or a year: billing periods, reports and card expiry.InputsMonth PlannerMonth calendar that draws events and trips as bars across the days they cover.PlanningNavigation MenuSite navigation bar whose triggers open panels of links below the header.NavigationNotepadA rich-text notepad that looks like paper: handwriting on ruled lines, a formatting toolbar over the selection, checklists and tear-off pages.PlanningNotification CenterAn inbox panel of notifications grouped by day, with read and unread states and mark all as read.FeedbackNumber InputForm-associated numeric input with native validation, step controls, adornments and helper states.InputsOrg ChartA hierarchy drawn as connected cards that collapse and expand: an organization chart, a reporting line or a team structure.Data displayOTP InputForm-associated one-time-code field with one cell per character, paste and SMS autofill, grouping and masking.InputsOverflow ListOne row of actions or links that shows what fits and folds the rest into a "More" menu, refitting as its width changes.LayoutOverlap chartA Venn diagram of two or three sets, where each circle is a set and each shared area counts the members of exactly that combination.ChartOverlayAnchored popup built on the browser Popover API, positioned with floating-ui.FeedbackPage EditorA Notion-style editor for long text: Markdown shortcuts while you type, a / menu for blocks, a toolbar over selected text, code blocks with syntax colours and eight named colours.Editors & viewersPage HeaderThe top of a page: breadcrumb or parent link, your heading with status badges, description, metadata, page actions that fold into a menu, tabs and a toolbar.LayoutPaginationPage navigation in three layouts: numbered pages, a simple page status, or a table-footer row with rows-per-page.NavigationPassword FieldA password input with a show/hide toggle, a strength meter, a requirements checklist and a Caps Lock warning.InputsPhone InputA phone number field with a searchable country picker, as-you-type grouping and an E.164 value.InputsPie chartA pie or donut chart drawn by ECharts, where one row is one slice and label-field names it.ChartPopconfirmA small "Are you sure?" popup anchored to the button that asked for it.FeedbackProgressProgress bar or ring, indeterminate or filling to a value, with an optional label and count.FeedbackPyramid chartRanked levels of a whole, stacked from a narrow apex to a wide base, where one row is one level.ChartQR CodeGenerate accessible, themeable QR codes locally as crisp SVG graphics.Data displayQuery InputA key:value query field whose filters are chips you can switch off or remove, with syntax highlighting and field and value suggestions, as in Datadog, GitHub and Sentry.InputsQuestionnaireA multi-step single- and multiple-choice flow with validation, shortcuts and form submission.InputsRadar chartCompare several profiles across the same set of normalized indicators.ChartRadioRadio options built on native inputs, grouped into one value with keyboard navigation.InputsRateAccessible star rating input with hover preview, keyboard control and optional half values.InputsReaction BarEmoji reactions with counts under a message or comment, toggled by the current user, with a picker to add more.ChatRelative TimeTime relative to now, such as "3 minutes ago" or "in 2 days", that keeps itself current and shows the full date on hover.Data displayReorder ListReorder a vertical queue with pointer or keyboard input while the application owns persistence.Data displayRich Text EditorA compact formatted-text field for comments, replies and email bodies: bold, links, lists, quotes and code, a one-tab-stop toolbar, and a Markdown value.InputsSankey chartQuantities moving through stages, where one row is one flow and each band is as wide as what it carries.ChartSave BarA floating bar that appears while a form has unsaved changes, with Discard and Save.LayoutScatter chartAn ECharts scatter plot for finding relationships, clusters and outliers across two numeric measures.ChartSearch FieldA search box with a debounced search event, a clear button, a keyboard shortcut hint and recent searches.InputsSecret FieldShows an API key or other secret masked, with buttons to reveal it, copy it and ask for a new one.InputsSelectDropdown that pairs a themeable trigger with an anchored list of c2-list-item options.InputsSeparatorHorizontal or vertical rule with an optional label, for dividing content and toolbars.LayoutSheetDialog pinned to an edge of the screen, for content that complements the page rather than interrupting it.FeedbackShortcutKeyboard shortcuts for a whole application from one element: each binding fires an action event, runs a handler or activates a target.InputsSide NavResponsive navigation drawer beside the page: pushes the content on large screens, slides over it with a backdrop on small ones.NavigationSkeletonPlaceholder block standing in for content that has not arrived, in three shapes and three animations.FeedbackSkip LinkA "Skip to main content" link that appears when a keyboard user tabs onto it and moves focus into the main content.NavigationSliderRange input with a themeable track, thumb, step ticks and value bubble.InputsSparklineA chromeless trend line sized for a table cell, a list row or the trend slot of a c2-stat.ChartSpinnerCircular progress indicator, indeterminate or showing a value, with optional text.FeedbackSplit ButtonA main action with a caret menu of alternatives, such as "Send ▾", or a remembered choice like a merge method.ButtonsSplit PanelTwo panels separated by a divider the user drags, or moves with the keyboard, to resize them.LayoutSpreadsheetA small editable grid with basic formulas, for budgets, quotes, price lists and score sheets.Editors & viewersStatDisplays a KPI with an optional icon, trend and supporting description.Data displayState TimelineOne band per series, coloured by the discrete state it was in over time: service health, CI runs, host power.ChartStatus LightColoured dot plus a short label for the state of something, such as Live, Building or Failed.Data displayStatus PanelCommunicate empty states, operation outcomes and recoverable errors with clear next steps.FeedbackStepsThe trace of a task as it runs, or a stepper across the top of a view: statuses, durations, stages that open while they work, and steps the reader can select.Data displayStickyPins content to the top or bottom of its scroll container and tells you when it is stuck, optionally hiding it while the reader scrolls down.LayoutStreaming TextPlain text that arrives in bursts, such as an LLM answer, revealed at a steady pace behind a caret.ChatSwipe ActionA list row that slides sideways to reveal actions behind it, as in a mail or task list on a phone.LayoutSwitchOn/off toggle on a native switch input, with label, description and thumb icons.InputsTableVirtualized data grid with declarative columns, sorting, selection, pinning and resizing.Data displayTable Of ContentsAn "On this page" navigation that lists the headings of a document, nests them by level and highlights the section being read.NavigationTabsTab strip that shows one content panel at a time.NavigationTag InputTurns typed or pasted text into removable tags — recipients, keywords, labels — with configurable delimiters, parsing and validation.InputsText FieldSingle-line input with icon slots, clear button, helper and error text, and a character counter.InputsTextareaMultiline text input with resizing, helper and error text, and a character counter.InputsTheme SelectColour-theme switcher: click to step to the next mode, hover for the full menu.InputsTime InputForm-associated time-of-day input with a scroll-wheel picker, step and range constraints, helper text and error states.InputsTime Range PickerDashboard time range control: searchable quick ranges, an absolute range typed or picked on a calendar, time zone, shift and zoom, and auto-refresh.InputsTime Slot PickerPick a free time from someone's calendar: a row of days, then that day's times grouped into morning, afternoon and evening.InputsTimelineA vertical sequence of dated events on a connected rail: order history, activity feeds, changelogs.Data displayToastNotification cards and a manager for stacked, queued notifications with independent lifetimes.FeedbackTodo ListA to-do list with the feel of paper: hand-drawn ticks, notes, highlighters, swipe and drag, and a remembered look.PlanningToggletipA small ⓘ button that opens a help bubble on click or tap; the bubble can hold links and is announced to screen readers.FeedbackTooltipContextual hint shown when its target is hovered or focused, rendered in the top layer.FeedbackTourA guided product tour that spotlights one element at a time and explains it in a panel beside it.FeedbackTrace WaterfallShow the spans of a distributed trace as a tree, each with a duration bar on one shared time axis.Data displayTreeHierarchical tree view with expansion, selection, checkboxes and lazy loading.Data displayTree SelectA dropdown for picking one or several rows from a hierarchy, with checkboxes, search and a form value.InputsTreemap chartA whole split into nested rectangles, each sized by its value: market maps, budgets and disk usage.ChartTruncateClamps text to a number of lines, with an optional Show more button.Data displayUploadDrag-and-drop file selection with validation, upload progress, retry, cancellation, and attachment results.InputsView OptionsThe Display popover of a collection: layout, grouping, ordering on several levels, Show switches and visible properties, reported as one plain value.InputsVirtual ListWindowed list with built-in search, sorting, selection and an async data source.Data displayVisually HiddenText for screen readers only: kept in the accessibility tree, drawn nowhere, optionally shown while it holds focus.LayoutWaterfall chartA running total bridged by the steps that move it, where one row is one step and totals mark where the bridge lands.ChartWeek PlannerWeekly schedule with time blocks: a typical week with optional odd and even weeks, or a dated week the user edits.PlanningWorking IndicatorA live "work in progress" line: animated mark, shimmering label, trailing dots and elapsed time.FeedbackFeather Icons287 open-source Feather icons, one web component each.IconsMat Icon2,234 Material Icons ligatures rendered through a single element.IconsPhosphor Icons1,512 flexible icons in six weights, one web component each.IconsSymbols157 themeable spot illustrations for empty states, status panels, onboarding and error pages.IconsTask icons191 duotone icons for to-do items: work, home, health, sport, learning, food, money, travel and more.IconsThemingTheme every c2n component from a handful of design tokens with @c2n/theme, or reach for any component variable directly.GuideLanguagesComponents show their text in English; add your app’s languages as one JSON object, picked by the nearest lang.GuideFrameworksUse the components from React, Vue, Angular, Svelte, Lit or plain HTML — typed events, generated template types, and the one piece of configuration each framework needs.GuideUsing c2n in an applicationThe workflow behind every c2n app: load the theme once, use c2-* tags directly, and turn every repeated pattern into a small variant or composed component.GuideAI toolsGive Claude Code, Codex, Google Antigravity or GitHub Copilot the c2n skill, live component APIs, examples and application conventions.GuideNo components match.