diff --git a/docs/components/input.md b/docs/components/input.md index 115e962423..9bff631882 100644 --- a/docs/components/input.md +++ b/docs/components/input.md @@ -54,6 +54,18 @@ Use the `pill` attribute to give inputs rounded edges. ``` +### Input Types + +The `type` attribute controls the type of input the browser renders. + +```html preview + +
+ +
+ +``` + ### Disabled Use the `disabled` attribute to disable an input. diff --git a/docs/resources/changelog.md b/docs/resources/changelog.md index e84043d96f..49ccdb194c 100644 --- a/docs/resources/changelog.md +++ b/docs/resources/changelog.md @@ -9,6 +9,7 @@ _During the beta period, these restrictions may be relaxed in the event of a mis ## Next - Added `--swatch-size` custom property to `sl-color-picker` +- Added `date` to `sl-input` as a supported `type` - Adjusted elevation tokens to use neutral in light mode and black in dark mode - Adjusted `--sl-overlay-background-color` in dark theme to be black instead of gray - Fixed a bug in `sl-color-picker` where the opacity slider wasn't showing the current color diff --git a/src/components/input/input.ts b/src/components/input/input.ts index 248fd6b554..3dda3ba02d 100644 --- a/src/components/input/input.ts +++ b/src/components/input/input.ts @@ -61,7 +61,8 @@ export default class SlInput extends LitElement { @state() private isPasswordVisible = false; /** The input's type. */ - @property({ reflect: true }) type: 'email' | 'number' | 'password' | 'search' | 'tel' | 'text' | 'url' = 'text'; + @property({ reflect: true }) type: 'date' | 'email' | 'number' | 'password' | 'search' | 'tel' | 'text' | 'url' = + 'text'; /** The input's size. */ @property({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';