The editor scrolls past this height. A height set on the element itself reaches the editor (the label and supporting text keep theirs); set this to none to fill it.
--c2-code-editor--padding-block
padding
10px
--c2-code-editor--padding-inline
padding
12px
--c2-code-editor--gap
pixel
6px
Space between the label, the editor and the supporting text.
c2-code-editor > focus
--c2-code-editor__focus--border
border
1px solid rgb(2, 101, 220)
--c2-code-editor__focus--outline
outline
2px solid rgba(2, 101, 220, 0.4)
c2-code-editor > disabled
--c2-code-editor__disabled--opacity
opacity
0.38
c2-code-editor > gutter
--c2-code-editor__gutter--background
color
transparent
--c2-code-editor__gutter--color
color
#71717a
--c2-code-editor__gutter--border-right
border
1px solid #e4e4e7
--c2-code-editor__gutter--min-width
pixel
32px
c2-code-editor > gutter > active
--c2-code-editor__gutter__active--color
color
#18181b
c2-code-editor > active-line
--c2-code-editor__active-line--background
color
rgba(2, 101, 220, 0.04)
c2-code-editor > selection
--c2-code-editor__selection--background
color
rgba(2, 101, 220, 0.18)
c2-code-editor > cursor
--c2-code-editor__cursor--color
color
#18181b
c2-code-editor > matching-bracket
--c2-code-editor__matching-bracket--background
color
rgba(2, 101, 220, 0.16)
c2-code-editor > placeholder
--c2-code-editor__placeholder--color
color
#71717a
c2-code-editor > theme
--c2-code-editor__theme--token-keyword
color
#cf222e
--c2-code-editor__theme--token-string
color
#032f62
--c2-code-editor__theme--token-comment
color
#636c76
--c2-code-editor__theme--token-constant
color
#0550ae
--c2-code-editor__theme--token-function
color
#6f42c1
--c2-code-editor__theme--token-type
color
#953800
--c2-code-editor__theme--token-property
color
#0550ae
--c2-code-editor__theme--token-variable
color
#24292e
--c2-code-editor__theme--token-tag
color
#116329
--c2-code-editor__theme--token-punctuation
color
#24292e
--c2-code-editor__theme--token-link
color
#032f62
--c2-code-editor__theme--token-invalid
color
#cf222e
c2-code-editor > label
--c2-code-editor__label--color
color
#18181b
--c2-code-editor__label--font-size
font-size
12px
--c2-code-editor__label--font-weight
font-weight
500
c2-code-editor > supporting-text
--c2-code-editor__supporting-text--color
color
#71717a
--c2-code-editor__supporting-text--font-size
font-size
12px
c2-code-editor > error
--c2-code-editor__error--color
color
#dc2626
--c2-code-editor__error--border
border
1px solid #dc2626
Code Editor
Editable, syntax-highlighted source field on CodeMirror 6, themed entirely through CSS variables.
Attributes
Name
Type
Default
Description
value
string
—
The source code. Assigning it replaces the document without losing scroll position or undo history.
language
string
—
Language id: one of BUILT_IN_LANGUAGES, anything languageLoader resolves, or empty for no highlighting.
name
string
—
Form field name.
label
string
—
Label above the editor, when the label slot is empty.
aria-label
string | null
null
Accessible name when nothing visible labels the editor.
placeholder
string
—
Text shown while the document is empty.
readonly
boolean
false
The document cannot be edited, but is still selectable and focusable.
disabled
boolean
false
Blocks interaction entirely and dims the editor.
required
boolean
false
The form is invalid while the value is empty.
line-numbers
boolean
false
Show the line-number gutter.
wrap
boolean
false
Wrap long lines instead of scrolling horizontally.
autocomplete
boolean
false
Offer completions while typing (identifiers, and whatever the grammar contributes).
tab-size
number
2
Width of a tab stop, in characters.
error
boolean
false
Renders the error styling; error-text replaces the supporting text.
error-text
string
—
Message shown in place of the supporting text while error is set.
help
string
—
Help text under the editor, when the supporting-text slot is empty.
Slots
Name
Description
label
Label shown above the editor. Falls back to the label attribute.
supporting-text
Help text under the editor. Replaced by error-text while error is set.
Events
Name
Type
Description
ready
CustomEvent<{ engine: 'codemirror' | 'basic' }>
The engine settled, so tests and hosts can wait for it. Does not bubble.
input
Event
The document changed. Fires on every edit.
change
Event
The value was committed: the editor lost focus after an edit, as a native control does.
CSS parts
Shadow DOM styling hooks used with ::part(name). Prefer CSS custom properties when they cover the change.
Name
Description
container
The box around the label, editor and supporting text.
label
Component-owned text region containing the label slot above the editor.
editor
The element CodeMirror renders into, or the fallback textarea.
supporting-text
Help and error row containing the supporting-text slot or generated fallback.
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.
The editor scrolls past this height. A height set on the element itself reaches the editor (the label and supporting text keep theirs); set this to none to fill it.
--c2-code-editor--padding-block
padding
10px
--c2-code-editor--padding-inline
padding
12px
--c2-code-editor--gap
pixel
6px
Space between the label, the editor and the supporting text.
c2-code-editor > focus
--c2-code-editor__focus--border
border
1px solid rgb(2, 101, 220)
--c2-code-editor__focus--outline
outline
2px solid rgba(2, 101, 220, 0.4)
c2-code-editor > disabled
--c2-code-editor__disabled--opacity
opacity
0.38
c2-code-editor > gutter
--c2-code-editor__gutter--background
color
transparent
--c2-code-editor__gutter--color
color
#71717a
--c2-code-editor__gutter--border-right
border
1px solid #e4e4e7
--c2-code-editor__gutter--min-width
pixel
32px
c2-code-editor > gutter > active
--c2-code-editor__gutter__active--color
color
#18181b
c2-code-editor > active-line
--c2-code-editor__active-line--background
color
rgba(2, 101, 220, 0.04)
c2-code-editor > selection
--c2-code-editor__selection--background
color
rgba(2, 101, 220, 0.18)
c2-code-editor > cursor
--c2-code-editor__cursor--color
color
#18181b
c2-code-editor > matching-bracket
--c2-code-editor__matching-bracket--background
color
rgba(2, 101, 220, 0.16)
c2-code-editor > placeholder
--c2-code-editor__placeholder--color
color
#71717a
c2-code-editor > theme
--c2-code-editor__theme--token-keyword
color
#cf222e
--c2-code-editor__theme--token-string
color
#032f62
--c2-code-editor__theme--token-comment
color
#636c76
--c2-code-editor__theme--token-constant
color
#0550ae
--c2-code-editor__theme--token-function
color
#6f42c1
--c2-code-editor__theme--token-type
color
#953800
--c2-code-editor__theme--token-property
color
#0550ae
--c2-code-editor__theme--token-variable
color
#24292e
--c2-code-editor__theme--token-tag
color
#116329
--c2-code-editor__theme--token-punctuation
color
#24292e
--c2-code-editor__theme--token-link
color
#032f62
--c2-code-editor__theme--token-invalid
color
#cf222e
c2-code-editor > label
--c2-code-editor__label--color
color
#18181b
--c2-code-editor__label--font-size
font-size
12px
--c2-code-editor__label--font-weight
font-weight
500
c2-code-editor > supporting-text
--c2-code-editor__supporting-text--color
color
#71717a
--c2-code-editor__supporting-text--font-size
font-size
12px
c2-code-editor > error
--c2-code-editor__error--color
color
#dc2626
--c2-code-editor__error--border
border
1px solid #dc2626
escAccordionConnected, animated panels with shared borders and single or multiple expansion.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 displayBar chartBars over categories or time buckets, with several series drawn side by side within each band.ChartBorder BeamA decorative beam that travels around the border of any positioned container.LayoutBreadcrumbNavigation trail of link buttons with separators, a current page and optional collapsing.NavigationButtonThemeable 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.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.ChatCheckboxNative checkbox behaviour in a quiet, themeable box with an opt-in hover layer.InputsCode EditorEditable, syntax-highlighted source field on CodeMirror 6, themed entirely through CSS variables.InputsCode ViewerSyntax-highlighted code with line numbers, copy button and dark mode, powered by shiki.Data displayColor 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.InputsCopy ButtonButton that copies text to the clipboard — the element it sits in, another element by id, or a literal string.ButtonsDashboardGrid 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.InputsDetailsCollapsible disclosure built on native details and summary.LayoutGauge chartA focused radial KPI gauge drawn by ECharts, with a configurable scale, progress arc and pointer.ChartHeaderArranges brand, navigation, actions and a mobile trigger in a reusable site shell.LayoutIcon ButtonRound, hoverable button wrapping a slotted SVG icon.ButtonsKbdKeyboard key label for shortcuts and command hints, with the semantics of the native kbd element.Data displayLabelCaption 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 displayMenuCommands, links, checkboxes and submenus in a popover anchored to a trigger.NavigationModalDialog built on the native dialog element: focus trap, backdrop, Escape, title, body and footer.FeedbackNavigation MenuSite navigation bar whose triggers open panels of links below the header.NavigationNumber InputForm-associated numeric input with native validation, step controls, adornments and helper states.InputsOverlayAnchored popup built on the browser Popover API, positioned with floating-ui.FeedbackPaginationPage navigation in three layouts: numbered pages, a simple page status, or a table-footer row with rows-per-page.NavigationPie chartA pie or donut chart drawn by ECharts, where one row is one slice and label-field names it.ChartProgressLinear progress bar, indeterminate or filling to a value, with an optional label and count.FeedbackQR CodeGenerate accessible, themeable QR codes locally as crisp SVG graphics.Data displayQuestionnaireA 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.InputsReorder ListReorder a vertical queue with pointer or keyboard input while the application owns persistence.Data displayScatter chartAn ECharts scatter plot for finding relationships, clusters and outliers across two numeric measures.ChartSelectDropdown that pairs a themeable trigger with an anchored list of c2-list-item options.InputsSeperatorHorizontal 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.FeedbackSide 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.FeedbackSliderRange 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.FeedbackStatDisplays a KPI with an optional icon, trend and supporting description.Data displayStatus PanelCommunicate empty states, operation outcomes and recoverable errors with clear next steps.FeedbackStepsA vertical trace of a task as it runs: statuses, durations, and stages that open while they work and close when they are done.Data displaySwitchOn/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 displayTabsTab strip that shows one content panel at a time.NavigationText 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.InputsToastNotification cards and a manager for stacked, queued notifications with independent lifetimes.FeedbackTooltipContextual hint shown when its target is hovered or focused, rendered in the top layer.FeedbackTreeHierarchical tree view with expansion, selection, checkboxes and lazy loading.Data displayUploadDrag-and-drop file selection with validation, upload progress, retry, cancellation, and attachment results.InputsVirtual ListWindowed list with built-in search, sorting, selection and an async data source.Data displayFeather 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.IconsThemingTheme every c2n component from a handful of design tokens with @c2n/theme, or reach for any component variable directly.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 or Google Antigravity the c2n skill, live component APIs, examples and application conventions.Guide