diff --git a/core/api.txt b/core/api.txt index 9db2fb433d0..f895ecd5422 100644 --- a/core/api.txt +++ b/core/api.txt @@ -1632,6 +1632,7 @@ ion-select,prop,multiple,boolean,false,false,false ion-select,prop,name,string,this.inputId,false,false ion-select,prop,okText,string,'OK',false,false ion-select,prop,placeholder,string | undefined,undefined,false,false +ion-select,prop,required,boolean,false,false,false ion-select,prop,selectedText,null | string | undefined,undefined,false,false ion-select,prop,shape,"round" | undefined,undefined,false,false ion-select,prop,toggleIcon,string | undefined,undefined,false,false diff --git a/core/src/components.d.ts b/core/src/components.d.ts index 620b053a7fa..1fe676da80f 100644 --- a/core/src/components.d.ts +++ b/core/src/components.d.ts @@ -2812,6 +2812,10 @@ export namespace Components { * The text to display when the select is empty. */ "placeholder"?: string; + /** + * If true, screen readers will announce it as a required field. This property works only for accessibility purposes, it will not prevent the form from submitting if the value is invalid. + */ + "required": boolean; /** * The text to display instead of the selected option's value. */ @@ -7652,6 +7656,10 @@ declare namespace LocalJSX { * The text to display when the select is empty. */ "placeholder"?: string; + /** + * If true, screen readers will announce it as a required field. This property works only for accessibility purposes, it will not prevent the form from submitting if the value is invalid. + */ + "required"?: boolean; /** * The text to display instead of the selected option's value. */ diff --git a/core/src/components/select/select.tsx b/core/src/components/select/select.tsx index 3b4ef84f26f..81c93244f65 100644 --- a/core/src/components/select/select.tsx +++ b/core/src/components/select/select.tsx @@ -196,6 +196,13 @@ export class Select implements ComponentInterface { */ @Prop({ mutable: true }) value?: any | null; + /** + * If true, screen readers will announce it as a required field. This property + * works only for accessibility purposes, it will not prevent the form from + * submitting if the value is invalid. + */ + @Prop() required = false; + /** * Emitted when the value has changed. * @@ -974,7 +981,7 @@ export class Select implements ComponentInterface { } private renderListbox() { - const { disabled, inputId, isExpanded } = this; + const { disabled, inputId, isExpanded, required } = this; return (