| Property | Values | Default |
|---|---|---|
| Value Variant | 0% | 50% | 100% | 0% |
| Disabled Variant | False | True | False |
| Interaction State Variant | Default | Hover | Pressed | Active | Default |
Slider vs Number Field vs Select vs Toggle
|
Component |
Use when |
Strengths |
Don’t use when |
|---|---|---|---|
|
Slider |
A value from a continuous or large range is needed (e.g., price filter, volume). |
Quick, intuitive, visual selection; supports ranges. |
If precise numeric input is required – use Text Field. If only a few discrete options exist – use Select or Radio. |
|
Number Field |
Users must enter a specific, precise numeric value (e.g., age, quantity). |
Allows exact values, supports stepper controls. |
If approximate visual input is fine – use Slider. If the value is categorical rather than numeric – use Select. |
|
Select |
The choice must be from a set of discrete options (numeric or non-numeric). |
Handles both short and long option lists; compact. |
If the range is continuous and large – use Slider. If only two options exist – use Toggle. |
|
Toggle |
For binary yes/no or on/off states. |
Simple, fast, clear binary interaction. |
If more than two options exist – use Select or Slider. If precision in numeric range is required – use Number Field. |