Carbon Design System
Preview

Code snippet

Stable
Last updated Aug 11, 2026
Carbon Core

Code snippets are strings or small blocks of reusable code that can be copied and inserted in a code file.

Code snippet

What Carbon provides

Carbon bakes keyboard operation into its components, as well as many other accessibility considerations.

Keyboard interaction

For all three variants, the code snippet can be copied with Space or Enter. Arrow keys can operate scroll bars.

inline code snippet keyboard interaction

By default, each inline code snippet is reachable by Tab and copied with Space or Enter.

single line code snippet interaction, with 2 tab stops

The single line code snippet tabstop supports left and right arrow key scrolling.

multi-line code snippet keyboard interaction

The multi-line's buttons are reachable by Tab and activated with Space or Enter.

Labeling and updates

Carbon provides the copy button's default label and tooltip behavior. Carbon handles notices about the success of the copy function, as well as updates to the Show more mechanism.

hovering on the button exposes 'copy to clipboard' tooltip

The code snippet's buttons expose their labels on hover or focus.

the activated button shows a 'copied!' message

The results of activating buttons are provided in text.

Development considerations

Keep this in mind if you are modifying Carbon or creating a custom component:

  • the inline code text is implemented as a button so its text can be copied
  • single line snippets take an additional tabstop to support arrow key scrolling

Accessibility testing status

Latest version: 1.112.0 | Framework: React (@carbon/react)

ComponentAccessibility testStatusLink to source code
Code snippetTest(s) that ensure the initial render state of a component is accessible.Some tests are incomplete, in progress, invalid, or temporarily skipped.GitHub link
Tests that ensure additional states of the component are accessible. This could be interactive states of a component or its multiple variants.Passes all automated tests with no reported accessibility violations.
Tests that ensure focus is properly managed, and all interactive functions of a component have a proper keyboard-accessible equivalent.Passes all automated tests with no reported accessibility violations.
This manual testing ensures that the visual information on the screen is properly conveyed and read correctly by screen readers such as JAWS, VoiceOver, and NVDA.A human has manually tested this component, e.g. screen reader testing.
Learn more about tag and test meaningView all component accessibility status

Feedback

Help us improve by providing feedback, asking questions, requesting features, or leaving any other comments on GitHub.