You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
feat(input-otp): add new input-otp component (#30386)
Adds a new component `ion-input-otp` which provides the OTP input functionality - Displays as an input group with multiple boxes accepting a single character - Accepts `type` which determines whether the boxes accept numbers or text/numbers and determines the keyboard to display - Supports changing the displayed keyboard using the `inputmode` property - Accepts a `length` property to control the number of input boxes - Accepts the following properties to change the design: `fill`, `shape`, `size`, `color` - Accepts a `separators` property to show a separator between 1 or more input boxes - Supports the `disabled`, `readonly` and invalid states - Supports limiting the accepted input via the `pattern` property - Emits the following events: `ionInput`, `ionChange`, `ionComplete`, `ionBlur`, `ionFocus` - Exposes the following method: `setFocus` --------- Co-authored-by: Brandy Smith <6577830+brandyscarney@users.noreply.github.com> Co-authored-by: Shane <shane@shanessite.net>
* Indicates whether and how the text value should be automatically capitalized as it is entered/edited by the user. Available options: `"off"`, `"none"`, `"on"`, `"sentences"`, `"words"`, `"characters"`.
1327
+
*/
1328
+
"autocapitalize": string;
1329
+
/**
1330
+
* The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics).
1331
+
*/
1332
+
"color"?: Color;
1333
+
/**
1334
+
* If `true`, the user cannot interact with the input.
1335
+
*/
1336
+
"disabled": boolean;
1337
+
/**
1338
+
* The fill for the input boxes. If `"solid"` the input boxes will have a background. If `"outline"` the input boxes will be transparent with a border.
1339
+
*/
1340
+
"fill"?: 'outline'|'solid';
1341
+
/**
1342
+
* A hint to the browser for which keyboard to display. Possible values: `"none"`, `"text"`, `"tel"`, `"url"`, `"email"`, `"numeric"`, `"decimal"`, and `"search"`. For numbers (type="number"): "numeric" For text (type="text"): "text"
* A regex pattern string for allowed characters. Defaults based on type. For numbers (`type="number"`): `"[\p{N}]"` For text (`type="text"`): `"[\p{L}\p{N}]"`
1351
+
*/
1352
+
"pattern"?: string;
1353
+
/**
1354
+
* If `true`, the user cannot modify the value.
1355
+
*/
1356
+
"readonly": boolean;
1357
+
/**
1358
+
* Where separators should be shown between input boxes. Can be a comma-separated string or an array of numbers. For example: `"3"` will show a separator after the 3rd input box. `[1,4]` will show a separator after the 1st and 4th input boxes. `"all"` will show a separator between every input box.
1359
+
*/
1360
+
"separators"?: 'all'|string|number[];
1361
+
/**
1362
+
* Sets focus to an input box.
1363
+
* @param index - The index of the input box to focus (0-based). If provided and the input box has a value, the input box at that index will be focused. Otherwise, the first empty input box or the last input if all are filled will be focused.
1364
+
*/
1365
+
"setFocus": (index?: number)=>Promise<void>;
1366
+
/**
1367
+
* The shape of the input boxes. If "round" they will have an increased border radius. If "rectangular" they will have no border radius. If "soft" they will have a soft border radius.
1368
+
*/
1369
+
"shape": 'round'|'rectangular'|'soft';
1370
+
/**
1371
+
* The size of the input boxes.
1372
+
*/
1373
+
"size": 'small'|'medium'|'large';
1374
+
/**
1375
+
* The type of input allowed in the input boxes.
1376
+
*/
1377
+
"type": 'text'|'number';
1378
+
/**
1379
+
* The value of the input group.
1380
+
*/
1381
+
"value"?: string|number|null;
1382
+
}
1322
1383
interfaceIonInputPasswordToggle{
1323
1384
/**
1324
1385
* The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics).
* Indicates whether and how the text value should be automatically capitalized as it is entered/edited by the user. Available options: `"off"`, `"none"`, `"on"`, `"sentences"`, `"words"`, `"characters"`.
6271
+
*/
6272
+
"autocapitalize"?: string;
6273
+
/**
6274
+
* The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics).
6275
+
*/
6276
+
"color"?: Color;
6277
+
/**
6278
+
* If `true`, the user cannot interact with the input.
6279
+
*/
6280
+
"disabled"?: boolean;
6281
+
/**
6282
+
* The fill for the input boxes. If `"solid"` the input boxes will have a background. If `"outline"` the input boxes will be transparent with a border.
6283
+
*/
6284
+
"fill"?: 'outline'|'solid';
6285
+
/**
6286
+
* A hint to the browser for which keyboard to display. Possible values: `"none"`, `"text"`, `"tel"`, `"url"`, `"email"`, `"numeric"`, `"decimal"`, and `"search"`. For numbers (type="number"): "numeric" For text (type="text"): "text"
* The `ionChange` event is fired when the user modifies the input's value. Unlike the `ionInput` event, the `ionChange` event is only fired when changes are committed, not as the user types. The `ionChange` event fires when the `<ion-input-otp>` component loses focus after its value has changed. This event will not emit when programmatically setting the `value` property.
* The `ionInput` event is fired each time the user modifies the input's value. Unlike the `ionChange` event, the `ionInput` event is fired for each alteration to the input's value. This typically happens for each keystroke as the user types. For elements that accept text input (`type=text`, `type=tel`, etc.), the interface is [`InputEvent`](https://developer.mozilla.org/en-US/docs/Web/API/InputEvent); for others, the interface is [`Event`](https://developer.mozilla.org/en-US/docs/Web/API/Event). If the input is cleared on edit, the type is `null`.
* A regex pattern string for allowed characters. Defaults based on type. For numbers (`type="number"`): `"[\p{N}]"` For text (`type="text"`): `"[\p{L}\p{N}]"`
6315
+
*/
6316
+
"pattern"?: string;
6317
+
/**
6318
+
* If `true`, the user cannot modify the value.
6319
+
*/
6320
+
"readonly"?: boolean;
6321
+
/**
6322
+
* Where separators should be shown between input boxes. Can be a comma-separated string or an array of numbers. For example: `"3"` will show a separator after the 3rd input box. `[1,4]` will show a separator after the 1st and 4th input boxes. `"all"` will show a separator between every input box.
6323
+
*/
6324
+
"separators"?: 'all'|string|number[];
6325
+
/**
6326
+
* The shape of the input boxes. If "round" they will have an increased border radius. If "rectangular" they will have no border radius. If "soft" they will have a soft border radius.
6327
+
*/
6328
+
"shape"?: 'round'|'rectangular'|'soft';
6329
+
/**
6330
+
* The size of the input boxes.
6331
+
*/
6332
+
"size"?: 'small'|'medium'|'large';
6333
+
/**
6334
+
* The type of input allowed in the input boxes.
6335
+
*/
6336
+
"type"?: 'text'|'number';
6337
+
/**
6338
+
* The value of the input group.
6339
+
*/
6340
+
"value"?: string|number|null;
6341
+
}
6181
6342
interfaceIonInputPasswordToggle{
6182
6343
/**
6183
6344
* The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics).
0 commit comments