# Feature OP-11155 - Add the Switch component and Switch Field pattern to the design system

Project: OpenProject
Status: closed
URL: https://community.openproject.org/work_packages/OP-11155

## Planning

| Attribute | Value |
| --- | --- |
| Date |  |
| Priority | Medium |
| Target versions | 12.3.0 |
| Sprint | 12.3.0 |
| Backlog bucket |  |
| Votes |  |
| List |  |
| Roadmap |  |
| Relevance |  |

## OPEN POINTS / FEEDBACK

_No work packages_

## Features and Chunks

| ID | Subject | Type | Status | Assignee | Target versions | Spent time |
| --- | --- | --- | --- | --- | --- | --- |
| OP-11170 | Add spot-selector-field component | Implementation | closed |  | 12.3.0 |  |
| OP-11171 | Add spot-form-field component | Implementation | closed |  | 12.3.0 |  |

## Bugs and other work packages

_No work packages_

## Technical Details

| Attribute | Value |
| --- | --- |
| Module |  |
| Feature Flag |  |
| Requires doc change | No |
| Enterprise plan |  |

## Details

| Attribute | Value |
| --- | --- |
| Pull preview |  |
| Mockups |  |
| Found in mobile app version |  |
| Follow-up feedback e-mail |  |
| Accessibility | No |

## People

| Attribute | Value |
| --- | --- |
| Assignee |  |
| Accountable |  |
| Product manager |  |
| Developers |  |
| Designer | Parimal Satyal |
| Ordered by |  |
| Signed off by |  |
| Interest by |  |

## Estimates and progress

| Attribute | Value |
| --- | --- |
| PD (min) |  |
| PD (max) |  |
| Work |  |
| Labor costs |  |

## Description

### Acceptance criteria

Add a **Switch** component and a **Switch Field** pattern to the design system:

  - The S**witch** **component** has:
      - a height of 1.25 rem
      - a fixed witdh of 2.25 rem
      - has two states
          - ON (primary colour, blue in default colour set)
          - OFF (grey)
      - There can be a disabled version of both states (opacity: 50%)
  - The **Switch field pattern** consists of the switch + a label:
      - The label can be either left or right of the switch itself
      - The label extends the clickable zone of the switch
      - There is a 0.5rem spacing between switch and the label
      - The label's width is determined by its content;
          - For very long titles, the element wraps around its container, with the switch aligned vertically top-aligned

### Example use

In the new datepicker (12.3):

<img class="op-uc-image op-uc-image_inline" src="/api/v3/attachments/38672/content">

### Visuals

**Docs in Figma for now:**  
<https://www.figma.com/file/XhCsrvs6rePifqbBpKYRWD/Components-Library?node-id=2478%3A8791>