How to setup
Design tokensComponents
Text 
Text field
Button
Control
List cells
Section heading
Navigation bar
Tab bar
Header
Toast
Tooltip
Page
Label
Cloud box
Loader
Slot
Empty stateModules
Banner
Bottom sheet
Modal
Drawer
Alert view
List view
Collection
Scalable collection
Scrollable collection
Interface editorial policy
Icons
Skeleton
Team
ChangelogText field
This basic input field helps users to search or fill in the information.
It is possible to turn icons on and off. Editing the color of the Title, Subtitle or Description is disabled. The icon can support any color token from the system.
Figma link
Default state
Behaviour
When the field is focused and there is 1 character, an icon appears to clear the field.
The keyboard can be opened for both numbers and letters.
The field has an error label. If the error text is not transmitted, the text is not shown.
Specs
The component size depends on the layout.
Recommended length:
Max storage value: 28 characters Max display value: 24 characters
Important: Keep the corresponding token in an inactive state.
Text field with icons
You can enable one or two icons in any field state, as well as enable left icon and combinate it with another icons.
Text field supports any icon from the kit.
Password field
Default state
Behaviour
When the field is focused and there is 1 character, an icon appears to clear the field.
The icon with an eye is always available. It allows you to see the contents of the password.
Characters are replaced with dots if the field is hidden.
The keyboard can be opened for both numbers and letters.
Specs
The component size depends on the layout.
Recommended length:
Max storage value: 28 characters Max display value: 24 characters
Important: Keep the corresponding token in an inactive state.
Password field with icons
You can enable one or two icons in any field state.
Password field supports any icon from the kit.
Phone field
Behaviour
When the field is focused and there is 1 character, an icon appears to clear the field.
The mask is a required attribute for the field. The mask can be different and depends on the phone number code.
You can set the default value for the code.
The input starts after the code, but the code can be changed manually.
The dropdown on the right is a button that opens the Bottom sheet with all country codes.
On mobile, the keyboard with numbers opens.
The field has an error label. If there is no error text created, the text is not shown.
Specs
The component size depends on the layout.
Important: Keep the corresponding token in an inactive state.
Code field
This is an input field for phone number verification code.
Behaviour
On mobile, the keyboard with numbers opens.
It is possible to insert a code from SMS.
The field has an error label. If the error text is not transmitted, the text is not shown.
From 2 to 8 cells
Behaviour
The field has to be flexible and be able to set the number of cells: from 2 to 8.
Each cell is a separate input field. We can’t use the long delete option in the apps. After deleting the number, the caret moves to the previous cell. If the input is clear, you can choose any cell.
Important: Keep the corresponding token in an inactive state.
From 8 to 12 cells
Behaviour
The field has to be flexible and be able to set the number of digits: 6, 9, or 12.
Each cell is a separate input field. The caret can be moved within the cell, but not in the whole input. We can’t use the long delete option in the apps.
Important:
- Every cell includes max 4 numbers in one cell; you can use 22, 333, 4444 numbers. In cases with one number in one cell, use the 2 to 8 component.
- The cell has fixed width and doesn’t depend on the amount of numbers.
Text View
An input field for more text. It is suitable for filling in personal data.
Behaviour
Default state
There’s no ability to add icons.
The default field size is set up in the design. If the user has entered more text than the field gives, the field expands. The default size of the field can also be changed.
The component size depends on the layout.
The keyboard can be opened for both numbers and letters.
The field has an error label. If the error text is not transmitted, the text is not shown.
Important: Keep the corresponding token in an inactive state.
Dropdown
The dropdown list helps quickly fill in the information and select the required option. It can also be used for navigation.
Default state
Behaviour
The dropdown opens the native window of the platform: iOS — picker Android — picker Web — native dropdown
A custom window will be designed soon.
This component has the ability to open any custom view—for example, the bottom sheet by click or tap.
Specs
The component size depends on the layout.
Recommended length:
Max storage value: 28 characters Max display value: 24 characters
Important:
- "Text" should be replaced by the selected parameter in the picker.
- The click zone is the entire dropdown.
- This component has the ability to open any custom view—for example, the bottom sheet by click or tap.
Dropdown with label
If you need to keep the context of the selection, enable a label. It will help the user remember what they selected.
Specs
Recommended length:
Max storage value: 28 characters Max display value: 24 characters
Important:
- "Text" remains static: it works like a hint that tells you what to select.
- The click zone is the entire dropdown.
- When selected, only the value of the label changes.
- Recommended max label length: 10 characters.
