Developer Keyword Difficulty, Positions, Volume
TIP
Make sure to read Filter common rules.
These filters are combined in one guide, since they differ only in the filter parameter, preset values, and the name. The principle of work and states are the same.
Description
These filters have preset range options and also allow to enter a custom number range.
When working with filters, it's important for the user to:
- understand that there are preset values and the ability to enter custom values
- quickly select and apply the presets
- quickly understand that nothing was found
- quickly reset the entered data and search again
- be able to change data
Appearance
Trigger
- For trigger use Select and FilterTrigger components.
- Set the trigger min-width to 80px. It's not recommended to make the trigger smaller. When there is enough space in the interface, make the width of the trigger dependent on the content, so the trigger value isn't truncated.
| Filter | Appearance example | Description |
|---|---|---|
| Keyword Difficulty |   | The Keyword Difficulty filter trigger always has one size. Abbreviate the name to KD %. |
| Positions |   | If the filter name and the value fits the width of the trigger, show the name of the filter Positions in full. If they don’t fit, abbreviate the filter name to Pos.. |
| Volume |   | If the filter name and the value fits the width of the trigger, show the name of the filter Volume in full. If they don’t fit, abbreviate the filter name to Vol.. |
Dropdown
Don't make a dropdown width less than 224px, otherwise the maximum possible values won't fit into the custom range inputs.
| Filter | Appearance example |
|---|---|
| Keyword Difficulty |   |
| Positions |   |
| Volume |   |
Preset values
TIP
Use an en dash, not a hyphen, between values – Opt/Alt + -.
| Filter | Keyword Difficulty | Positions | Volume |
|---|---|---|---|
| Appearance example | | | |
Custom range
Use the InputRange pattern to enter a custom range.
| Case | Appearance example |
|---|---|
| If nothing is entered, the bottom stepper is disabled. |  |
| If a maximum value is entered, the upper stepper becomes inactive. |  |
Interaction
Filter interaction is described in detail in Filter common rules.
Tooltips
For more information about tooltips, refer to Filter common rules.
| Filter | Appearance example |
|---|---|
| Keyword Difficulty |  |
| Positions |  |
| Volume |  |
Validation
Validation is described in the Filter common rules.
Nothing found
"Empty" state is described in the Filter common rules.