Input
This component was previously named ds-text-input.
Options
There are two basic html structures for using ds-input. The most basic implementation is to apply ds-input directly to the html input/textarea element.
As of v1.13 ds-input can be applied to a wrapper div which provides better icon support and improved layout when combined with ds-text --addon.
ds-input may be used with html input or html textarea (available from v1.8.12+) elements.
Basic usage
Component state
Disabled
Readonly
Placeholder
Visual states
Text input adheres to the 4x preset visual states - alert, warning, success and info.
Icons
To apply icons to ds-input, you must use the div based html structure.
Size
Small, large
Narrow, mid, wide
By default ds-input takes the full width of it’s container element.
Types
Date picker
The native date picker works across all target browsers and the UI is specific to each to browser.
The displayed date is formatted based on the locale of the user’s browser, but the parsed value is always formatted yyyy-mm-dd
Optional attributes
| Attribute | Required | Description | Value |
|---|---|---|---|
max |
Optional | The latest allowable date | yyyy-mm-dd |
min |
Optional | The earliest allowable date | yyyy-mm-dd |
step |
Optional | The step increment when adjusting the date | “any” or number |
Time picker
The native time picker works across all target browsers and the UI is specific to each to browser.
The displayed time is formatted based on the locale of the user’s browser, but the parsed value is always in 24-hour format that includes leading zeros: hh:mm or hh:mm:ss.
The time picker is only for specific time values (00:00 - 24:00). Longer times (for specifying time length such as 48 hours) will not work with the native type="time" component.
Optional attributes
| Attribute | Required | Description | Value |
|---|---|---|---|
max |
Optional | The latest allowable time | hh:mm or hh:mm:ss |
min |
Optional | The earliest allowable time | hh:mm or hh:mm:ss |
step |
Optional | The step increment when adjusting the time | “any” or number |
Datetime picker
The native datetime picker works across all target browsers except Firefox and the UI is specific to each to browser.
See also the split datetime picker - which is also works in Firefox.
The displayed date is formatted based on the locale of the user’s browser, but the parsed value is always formatted yyyy-mm-ddThh:mm
Optional attributes
| Attribute | Required | Description | Value |
|---|---|---|---|
max |
Optional | The latest allowable date | yyyy-mm-ddThh:mm |
min |
Optional | The earliest allowable date | yyyy-mm-ddThh:mm |
step |
Optional | The step increment when adjusting the date | “any” or number |
pattern |
Optional | Only used by browsers that don’t support datetime-local | “[0-9]4-[0-9]2-[0-9]2T[0-9]2:[0-9]2” |
placeholder |
Optional | Only used by browsers that don’t support datetime-local | “yy-mm-ddThh:mm” |
Split datetime
Split datetime uses two input fields - type="date", type="time" (See the requirements/options for each above) and optional ds-button.
This version has the advantage of working across all target browsers (including Firefox).
File upload
See Field with file upload for additional examples.
Styles
Code style
Composition
Child components
The wrapper form of ds-input supports SDS components as direct children before or after the native input element.
Buttons
ds-button can be used as a child of ds-input. See ds-button for further examples.
Text
ds-text can be used as a child of ds-input. See ds-text for further examples.
Inline icons
Tags
Multiple child components
Examples
datetime-split combined with sizing options
datetime-split with buttons combined with sizing options
datetime-split with ds-autoselect combined with sizing options
datetime-split with buttons and ds-autoselect combined with sizing options
Manifest
The component manifest describes this component's API: its modifiers, structure, data attributes, CSS custom properties, accessibility notes, and example markup. It is consumed by tooling such as AI assistants and code generators.
Latest version: https://assets.soracom.io/sds/3.40.1/ds-input/manifest.json?v=3.40.1