|
|
|
@@ -23,24 +23,36 @@ |
|
|
|
|
|
|
|
## HTML enhancement |
|
|
|
|
|
|
|
| HTML element | Tesseract counterpart | Remarks | |
|
|
|
|----------------------------------------------------------------------------|-------------------------------|------------------------------------------------------------------------------| |
|
|
|
| `<button>` | `action/ActionButton` | | |
|
|
|
| `<input type="button">` | `action/ActionButton` | | |
|
|
|
| `<input type="reset">` | `action/ActionButton` | | |
|
|
|
| `<input type="submit">` | `action/ActionButton` | | |
|
|
|
| `<textarea>` | `freeform/MultilineTextInput` | | |
|
|
|
| `<input type="text">` | `freeform/TextInput` | | |
|
|
|
| `<input type="search">` | `freeform/TextInput` | The consumer may choose to add a search icon (magnifying glass) as indicator | |
|
|
|
| `<input type="password">` | `freeform/MaskedTextInput` | | |
|
|
|
| `<a>` with button appearance | `navigation/LinkButton` | | |
|
|
|
| `<select>` without `multiple` attribute and with dropdown appearance | `option/DropdownSelect` | | |
|
|
|
| `<select>` with list box appearance | `option/MenuSelect` | The `multiple` prop can be set here. | |
|
|
|
| `<input type="checkbox">` with `indeterminate` state | `option/ToggleTickBox` | | |
|
|
|
| `<input type="checkbox">` with `indeterminate` state and button appearance | `option/ToggleButton` | | |
|
|
|
| `<input type="checkbox">` without `indeterminate` state | `option/ToggleSwitch` | Prefer using this component when indeterminate state is not expected. | |
|
|
|
| `<input type="radio">` | `option/RadioTickBox` | | |
|
|
|
| `<input type="radio">` with button appearance | `option/RadioButton` | | |
|
|
|
| `<input type="number">` | `number/Spinner` | Use this component for discrete values. | |
|
|
|
| `<input type="range">` | `number/Slider` | Use this component for continuous values. | |
|
|
|
| HTML element | Tesseract counterpart | Remarks | |
|
|
|
|---------------------------------------------------------------------------------------------------------------|-------------------------------|-------------------------------------------------------------------------------| |
|
|
|
| `<button>` | `action/ActionButton` | | |
|
|
|
| `<input type="button">` | `action/ActionButton` | | |
|
|
|
| `<input type="reset">` | `action/ActionButton` | | |
|
|
|
| `<input type="submit">` | `action/ActionButton` | | |
|
|
|
| `<textarea>` | `freeform/MultilineTextInput` | | |
|
|
|
| `<input type="text">` | `freeform/TextInput` | | |
|
|
|
| `<input type="search">` | `freeform/TextInput` | The consumer may choose to add a search icon (magnifying glass) as indicator. | |
|
|
|
| `<input type="password">` | `freeform/MaskedTextInput` | | |
|
|
|
| `<a>` with button appearance | `navigation/LinkButton` | | |
|
|
|
| `<select>` without `multiple` attribute and with dropdown appearance | `option/DropdownSelect` | | |
|
|
|
| `<select>` with list box appearance | `option/MenuSelect` | The `multiple` prop can be set here. | |
|
|
|
| `<input type="checkbox">` with `indeterminate` state | `option/ToggleTickBox` | | |
|
|
|
| `<input type="checkbox">` with `indeterminate` state and button appearance | `option/ToggleButton` | | |
|
|
|
| `<input type="checkbox">` without `indeterminate` state | `option/ToggleSwitch` | Prefer using this component when indeterminate state is not expected. | |
|
|
|
| `<input type="radio">` | `option/RadioTickBox` | | |
|
|
|
| `<input type="radio">` with button appearance | `option/RadioButton` | | |
|
|
|
| `<input type="number">` | `numeric/Spinner` | Use this component for discrete values. | |
|
|
|
| `<input type="range">` | `numeric/Slider` | Use this component for continuous values. | |
|
|
|
| `<input type="date">` with dropdown calendar | `temporal/DateDropdown` | | |
|
|
|
| `<input type="date">` as inline calendar | `temporal/Calendar` | Falls back to native date input. | |
|
|
|
| `<input type="time">` with spinners for hour, minute, seconds, and milliseconds; switch for (AM/PM) selection | `temporal/TimeSpinner` | Optional seconds and milliseconds. | |
|
|
|
| `<input type="time">` with clock face | `temporal/Clock` | Falls back to native time input. | |
|
|
|
|
|
|
|
## Additional components |
|
|
|
|
|
|
|
| Component | Tesseract implementation | Remarks | |
|
|
|
|-----------------------|--------------------------|------------------------------------------------------------------------------------------------------------------------------| |
|
|
|
| Tag input | `option/TagInput` | Can specify predefined options (like `<input>` with `list` attribute). | |
|
|
|
| X-Y select (2D range) | `numeric/Range2D` | | |
|
|
|
| Knob | `numeric/Knob` | | |
|
|
|
| Duration input | `temporal/DurationInput` | Can specify precision up to milliseconds, falls back to native number input (always returns milliseconds for compatibility). | |
