Components

Components are reusable parts of the user interface that have been made to support a variety of applications. Any components with interactive capabilities can also be navigated using the keyboard, for accessibility purposes.

Each component in the gov.cy Unified Design System has guidance on its use and coded examples. If you are using the developers assets and the code in our documentation, coded examples will render the same as in the Design System.

You can use individual components in many different patterns and contexts.

Use the links on this page to navigated to the desired component.

Accordion

The accordion component lets users show and hide sections of related content on a page.

Back Link

Use the back link component to help users go back to the previous page in a multi-page transaction.

Breadcrumbs

The breadcrumbs component helps users to understand where they are within a website’s structure and move between levels.

Button

Use the button component to help users carry out an action like starting an application or saving their information.

Character count

Help users know how much text they can enter when there is a limit on the number of characters.

Checkbox

Let users select one or more options by using the checkboxes component.

Cookie banner

Allow users to accept or reject cookies which are not essential to making your service work.

Data tables

Data tables are used to organize and display large data sets.

Date input

Let users enter a memorable date or one they can easily look up.

Date picker

Use the date picker component when you’re asking users for a date that is in the near future or recent past

Details

Make it easier for the users to scan the page, by letting them reveal more detailed information only if they need it.

Error Message

Use this component to show an error message next to the field and in the error summary when there is a validation error.

Error Summary

Use this component at the top of a page to summarise any errors a user has made.

Fieldset

Use the fieldset component to group related form inputs.

File upload

Help users select and upload a file.

Footer

Use the footer to provide copyright information and links for privacy statements, cookie policy and accessibility statements

Header

Use the gov.cy header to shows users that they are on gov.cy and which service they are using.

Inset text

Use the inset text component to differentiate a block of text from the content that surrounds it.

Panel

Use the panel component to display important information when a transaction has been completed.

Phase banner

Use the phase banner component to show users your service is still being worked on.

Radio

Use the radios component when users can only select one option from a list.

Select

Use the select component when users can only select one option from a long list.

Summary list

Use the summary list to summarise information, for example, a user’s responses at the end of a service.

Table

Use the table component to make information easier to compare and scan for users.

Tag

Use the tag component to show users the status of something.

Text Input

Use the text input component when you need to let users enter text that’s no longer than a single line.

Textarea

Use the text area component when you need to let users enter an amount of text that’s longer than a single line.

User’s name and sign out

Use this component to help the user’s identify which account they are signed in with and provide them with a link to sign out of their account.

Warning text

Use the warning text component when you need to warn users about something important.