Skip to content

Commit 533b099

Browse files
chore: add selection methods section to form docs (#3996)
* chore: add selection methods section to form docs * chore: remove extra section --------- Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
1 parent 2aacaf7 commit 533b099

File tree

1 file changed

+26
-0
lines changed
  • packages/paste-website/src/pages/components/form

1 file changed

+26
-0
lines changed

packages/paste-website/src/pages/components/form/index.mdx

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -416,6 +416,32 @@ Make required and optional fields distinguishable. Try to avoid optional input f
416416

417417
Text is the clearest way to indicate whether a field is required or optional. However, the required symbol is relatively well understood. If you use the required symbol to indicate required fields, you'll see a "Required" title on the symbol. If you're building for other languages, use the `i18nLabel` prop to translate the "Required" title.
418418

419+
#### Selection methods
420+
421+
##### Single selection
422+
423+
| Component | When to use |
424+
| ------------------------------------------------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------- |
425+
| [Radio Group](/components/radio-group) or [Radio Button Group](/components/radio-button-group) | Use it when you have a list of up to 6 fixed items, and users need to select only one at a time. |
426+
| [Select](/components/select) or [Singleselect Combobox](/components/combobox) | Use it when you have more than 6 options in a fixed list and users need to select only one at a time.|
427+
| [Singleselect Combobox - Autocomplete](/components/combobox#autocomplete-combobox) | Use it when you have lists with over 15 options or if users need to search through a database and select a single option at a time.|
428+
429+
##### Multiple selection
430+
431+
|Component | When to use
432+
|----------------------------------------------------------------------------------- | -----------------------------------------------------------------------------------------------------------------------------------|
433+
|[Checkbox Group](/components/checkbox) | Use it when you have a list of up to 6 fixed items, and users can select multiple values at a time.|
434+
|[Multiselect Combobox](/components/multiselect-combobox) | Use it when you have lists with over 6 options or if users need to search through a database and select multiple values at a time.|
435+
436+
##### Numeric selection
437+
438+
|Component | When to use
439+
|----------------------------------------------------------------------------------- | -----------------------------------------------------------------------------------------------------------------------------------|
440+
|[Slider](/components/slider) | Use it when the exact value doesn’t matter.|
441+
|[Input with number functionality](/components/input#input-with-number-functionality) | Use it when the exact numeric value matters.|
442+
|[Date Picker](/components/date-picker) | Use it for selecting specific dates or date ranges.|
443+
|[Time Picker](/components/time-picker) | Use it for selecting specific times or time ranges.|
444+
419445
## When to use Forms
420446

421447
Use a Form when users are expected to enter more than a single form component to collect user input.

0 commit comments

Comments
 (0)