Circuit UI Documentation

This template provides a preconfigured environment for building applications using the SumUp frontend stack. It integrates the following technologies:

• Framework: Next.js
• Design System: Circuit UI
• Frontend Toolkit: Foundry (handles linting, formatting, and commit hooks)
• Styling: CSS Modules
• Testing: Jest and Testing Library

The CurrencyInput component is used to indicate to a user that a numeric value should be entered in a specific currency. It handles the display and formatting of currency-related numeric input.

import { CurrencyInput } from '@sumup-oss/circuit-ui';

// Basic usage
<CurrencyInput />

The ImageInput component allows users to upload images. It can be used as a standalone component or integrated into a form. It supports various states like invalid and can be customized with different visual components (like an Avatar or a custom img/div element) to change its dimensions or appearance.

<Story of={Stories.Base} />

Icons can be added to buttons to provide context or hint at behavior:

• Leading Icons: Rendered on the leading side of the label to provide additional context (e.g., a search icon for a search submission).
• Navigation Icons: Used to hint that the button performs an unexpected action, such as opening a dropdown or navigating to a new tab. Note: Navigation icons are not a substitute for leading icons and should not be used solely for context.

When composing the content of a Toggletip, follow these constraints to ensure usability:

• Headline: Use only when necessary. It must be accompanied by body text. Keep it short (under 120 characters).
• Body Text: Use for additional help or defining terms. Avoid essential instructions.
• Action Button: Use to point users to more information or to enable a contextual action. Use a strong, clear imperative verb followed by a one-word object if needed (e.g., "Learn more").

Starting in v6.3, Circuit UI components (excluding the legacy Sidebar) use new semantic color tokens declared as CSS custom properties in BaseStyles. These tokens are designed to support theming and robust customization.

Note: Legacy color tokens from @sumup/design-tokens are deprecated and scheduled for removal in a future major version. You should transition your custom styles to use the new semantic CSS custom properties.

To maintain accessibility, every RadioButtonInput must have an accessible name (label). There are two primary ways to implement this:

1. Nested Label (Recommended): Pass the label text as a child of the RadioButtonInput. This automatically renders the text inside a label element associated with the input, allowing users to activate the radio button by clicking the label.

   • Warning: Do not include interactive elements like anchors (<a>) or tooltips inside the label, as accessible names should not contain complex semantics or structure.

2. ARIA Attributes (For separate labels): If the label must be visually or structurally separate from the input, use ARIA attributes to create the association:

   • Use aria-labelledby to associate the input with an existing label element.
   • Use aria-describedby to associate the input with additional descriptive context.

When using the Image component, ensure you follow accessibility guidelines to comply with WCAG standards:

• Alt Text: Always provide helpful alternative text to describe the content of the image for users relying on screen readers.
• Avoid Images of Text: To comply with WCAG 1.4.5 (Level AA) and 1.4.9 (Level AAA), avoid using images that primarily contain text. Use actual text elements instead to ensure readability and accessibility.