Forms

The Ryte forms include icons, labels, input fields, help texts, placeholder texts, and validation. Be as concise as possible when designing forms and adhere to form accessibility guidelines.

Input field

Active state

Disabled state

Error state

 
Search field

 
Select field

active state

 
disabled state

 
Textarea

active state

disabled state




Help text

 
Toggle switch

active state

 
disabled state

 

.switch {
  position: relative;
  display: inline-block;
  border-radius: 10px;
  transition: opacity 0.25s ease;
  user-select: none;
}

.switch-bg {
  height: 20px;
  width: 36px;
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.3s ease;
  background: #a1b1c180; /* #a1b1c1 opacity .5 */
}

.switch-on .switch-bg {
  background: #03bc9d;
}

.switch-handle {
  height: 18px;
  width: 18px;
  background: #fff;
  cursor: pointer;
  display: inline-block;
  border-radius: 50%;
  position: absolute;
  top: 1px;
  outline: 0px;
  transition: transform 0.3s ease;
  transform: translateX(1px);
}

.switch-on .switch-handle {
  transform: translateX(17px);
}

.switch.disabled {
  opacity: .5;
  background: #e6e7ea;
}

.switch.disabled * {
  cursor: not-allowed;
}

.switch.disabled .switch-bg {
  background: #e6e7ea; /* same as checkbox.disabled */
}

.switch.disabled.switch-on .switch-bg {
  background: #03bc9d4d; /* $green opacity .3 */
}

 
Checkbox

active state
   

disabled state
   

 
Radio label

active state

disabled state

Form accessibility

Don’t use placeholder text as a label due to accessibility issues.