diff --git a/COMPONENT_INDEX.md b/COMPONENT_INDEX.md
index 22c7c8ef..7e3a18d0 100644
--- a/COMPONENT_INDEX.md
+++ b/COMPONENT_INDEX.md
@@ -4215,50 +4215,53 @@ None.
### Props
-| Prop name | Required | Kind | Reactive | Type | Default value | Description |
-| :---------- | :------- | :--------------- | :------- | --------------------------------------------- | ------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| value | No | let | Yes | null | number | string | "" | Specify the input value
`value` will be set to `null` if `type = "number"` and the value is empty |
-| ref | No | let | Yes | null | HTMLInputElement | null | Obtain a reference to the input HTML element |
-| disabled | No | let | No | boolean | false | Set to `true` to disable the input |
-| counter | No | let | No | "char" | "word" | undefined | Set to "char" to enable display the character counter or "word" to display the word count. |
-| helperText | No | let | No | string | "" | Specify the helper text |
-| hideLabel | No | let | No | boolean | false | Set to `true` to visually hide the label text |
-| id | No | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the input element |
-| inline | No | let | No | boolean | false | Set to `true` to use the inline variant |
-| invalid | No | let | No | boolean | false | Set to `true` to indicate an invalid state |
-| invalidText | No | let | No | string | "" | Specify the invalid state text |
-| labelText | No | let | No | string | "" | Specify the label text |
-| light | No | let | No | boolean | false | Set to `true` to enable the light variant
For use on $ui-01 backgrounds only. Don't use this to make tile background color same as container background color
The light prop for `TextInput` has been deprecated in favor of the new `Layer` Layer component. It will be removed in the next major release
@deprecated |
-| maxCount | No | let | No | number | undefined | Specify the maximum number of characters/words allowed
This is needed in order for `counter` to display |
-| name | No | let | No | string | undefined | Specify a name attribute for the input |
-| placeholder | No | let | No | string | "" | Specify the placeholder text |
-| readonly | No | let | No | boolean | false | Set to `true` to use the read-only variant |
-| required | No | let | No | boolean | false | Set to `true` to mark the field as required |
-| size | No | let | No | "sm" | "md" | "lg" | undefined | Set the size of the input |
-| warn | No | let | No | boolean | false | Set to `true` to indicate an warning state |
-| warnText | No | let | No | string | "" | Specify the warning state text |
+| Prop name | Required | Kind | Reactive | Type | Default value | Description |
+| :-------------- | :------- | :--------------- | :------- | --------------------------------------------- | ------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| value | No | let | Yes | null | number | string | "" | Specify the input value
`value` will be set to `null` if `type = "number"` and the value is empty |
+| ref | No | let | Yes | null | HTMLInputElement | null | Obtain a reference to the input HTML element |
+| counter | No | let | No | -- | undefined | Set to "char" to enable display the character counter or "word" to display the word count. |
+| disabled | No | let | No | boolean | false | Set to `true` to disable the input |
+| helperText | No | let | No | string | "" | Specify the helper text |
+| hideLabel | No | let | No | boolean | false | Set to `true` to visually hide the label text |
+| id | No | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the input element |
+| inline | No | let | No | boolean | false | Set to `true` to use the inline variant |
+| invalid | No | let | No | boolean | false | Set to `true` to indicate an invalid state |
+| invalidText | No | let | No | string | "" | Specify the invalid state text |
+| labelText | No | let | No | string | "" | Specify the label text |
+| light | No | let | No | boolean | false | Set to `true` to enable the light variant
For use on $ui-01 backgrounds only. Don't use this to make tile background color same as container background color
The light prop for `TextInput` has been deprecated in favor of the new `Layer` Layer component. It will be removed in the next major release
@deprecated |
+| maxCount | No | let | No | number | undefined | Specify the maximum number of characters/words allowed
This is needed in order for `counter` to display |
+| name | No | let | No | string | undefined | Specify a name attribute for the input |
+| placeholder | No | let | No | string | "" | Specify the placeholder text |
+| readonly | No | let | No | boolean | false | Set to `true` to use the read-only variant |
+| required | No | let | No | boolean | false | Set to `true` to mark the field as required |
+| size | No | let | No | "sm" | "md" | "lg" | undefined | Set the size of the input |
+| warn | No | let | No | boolean | false | Set to `true` to indicate an warning state |
+| warnText | No | let | No | string | "" | Specify the warning state text |
+| labelAttributes | No | let | No | Record | {} | Set HTML attributes on the `label` element |
+| inputAttributes | No | let | No | Record | {} | Set HTML attributes on the `input` element |
### Slots
-| Slot name | Default | Props | Fallback |
-| :-------- | :------ | :---- | :----------------------- |
-| labelText | No | -- | {labelText} |
+| Slot name | Default | Props | Fallback |
+| :--------- | :------ | :---- | :------------------------ |
+| helperText | No | -- | {helperText} |
+| labelText | No | -- | {labelText} |
### Events
-| Event name | Type | Detail |
-| :--------- | :--------- | :-------------------------------------------- |
-| change | dispatched | null | number | string |
-| input | dispatched | null | number | string |
-| click | forwarded | -- |
-| mouseover | forwarded | -- |
-| mouseenter | forwarded | -- |
-| mouseleave | forwarded | -- |
-| keydown | forwarded | -- |
-| keyup | forwarded | -- |
-| focus | forwarded | -- |
-| blur | forwarded | -- |
-| paste | forwarded | -- |
+| Event name | Type | Detail |
+| :--------- | :--------- | :----- |
+| click | forwarded | -- |
+| mouseover | forwarded | -- |
+| mouseenter | forwarded | -- |
+| mouseleave | forwarded | -- |
+| keydown | forwarded | -- |
+| keyup | forwarded | -- |
+| focus | forwarded | -- |
+| blur | forwarded | -- |
+| paste | forwarded | -- |
+| input | dispatched | -- |
+| change | dispatched | -- |
## `TextInputSkeleton`
diff --git a/docs/src/COMPONENT_API.json b/docs/src/COMPONENT_API.json
index 6c9b933c..fc6a873a 100644
--- a/docs/src/COMPONENT_API.json
+++ b/docs/src/COMPONENT_API.json
@@ -12698,11 +12698,9 @@
"filePath": "src/TextInput/TextInput.svelte",
"props": [
{
- "name": "disabled",
+ "name": "counter",
"kind": "let",
- "description": "Set to `true` to disable the input",
- "type": "boolean",
- "value": "false",
+ "description": "Set to \"char\" to enable display the character counter or \"word\" to display the word count.",
"isFunction": false,
"isFunctionDeclaration": false,
"isRequired": false,
@@ -12710,10 +12708,11 @@
"reactive": false
},
{
- "name": "counter",
+ "name": "disabled",
"kind": "let",
- "description": "Set to \"char\" to enable display the character counter or \"word\" to display the word count.",
- "type": "\"char\" | \"word\"",
+ "description": "Set to `true` to disable the input",
+ "type": "boolean",
+ "value": "false",
"isFunction": false,
"isFunctionDeclaration": false,
"isRequired": false,
@@ -12932,10 +12931,40 @@
"isRequired": false,
"constant": false,
"reactive": false
+ },
+ {
+ "name": "labelAttributes",
+ "kind": "let",
+ "description": "Set HTML attributes on the `label` element",
+ "type": "Record",
+ "value": "{}",
+ "isFunction": false,
+ "isFunctionDeclaration": false,
+ "isRequired": false,
+ "constant": false,
+ "reactive": false
+ },
+ {
+ "name": "inputAttributes",
+ "kind": "let",
+ "description": "Set HTML attributes on the `input` element",
+ "type": "Record",
+ "value": "{}",
+ "isFunction": false,
+ "isFunctionDeclaration": false,
+ "isRequired": false,
+ "constant": false,
+ "reactive": false
}
],
"moduleExports": [],
"slots": [
+ {
+ "name": "helperText",
+ "default": false,
+ "fallback": "{helperText}",
+ "slot_props": "{}"
+ },
{
"name": "labelText",
"default": false,
@@ -12944,16 +12973,6 @@
}
],
"events": [
- {
- "type": "dispatched",
- "name": "change",
- "detail": "null | number | string"
- },
- {
- "type": "dispatched",
- "name": "input",
- "detail": "null | number | string"
- },
{ "type": "forwarded", "name": "click", "element": "div" },
{ "type": "forwarded", "name": "mouseover", "element": "div" },
{ "type": "forwarded", "name": "mouseenter", "element": "div" },
@@ -12962,10 +12981,11 @@
{ "type": "forwarded", "name": "keyup", "element": "input" },
{ "type": "forwarded", "name": "focus", "element": "input" },
{ "type": "forwarded", "name": "blur", "element": "input" },
- { "type": "forwarded", "name": "paste", "element": "input" }
+ { "type": "forwarded", "name": "paste", "element": "input" },
+ { "type": "dispatched", "name": "input" },
+ { "type": "dispatched", "name": "change" }
],
- "typedefs": [],
- "rest_props": { "type": "Element", "name": "input" }
+ "typedefs": []
},
{
"moduleName": "TextInputSkeleton",
diff --git a/docs/src/pages/components/TextInput.svx b/docs/src/pages/components/TextInput.svx
index ebaf0cae..1022da6f 100644
--- a/docs/src/pages/components/TextInput.svx
+++ b/docs/src/pages/components/TextInput.svx
@@ -9,35 +9,35 @@ components: ["TextInput", "TextInputSkeleton"]
## Default
-
+
## With helper text
-
+
## Hidden label
-
+
## Light variant
-
+
## Inline variant
-
+
## Read-only variant
-
+
## Large size
-
+
## Small size
-
+
## Character Counter
@@ -45,15 +45,15 @@ components: ["TextInput", "TextInputSkeleton"]
## Invalid state
-
+
## Warning state
-
+
## Disabled state
-
+
## Skeleton
diff --git a/src/TextInput/TextInput.svelte b/src/TextInput/TextInput.svelte
index 7ac95af2..42f316ce 100644
--- a/src/TextInput/TextInput.svelte
+++ b/src/TextInput/TextInput.svelte
@@ -4,15 +4,15 @@
* @event {null | number | string} input
*/
- /** Set to `true` to disable the input */
- export let disabled = false;
-
/**
* Set to "char" to enable display the character counter or "word" to display the word count.
* @type {"char" | "word"}
*/
export let counter = undefined;
+ /** Set to `true` to disable the input */
+ export let disabled = false;
+
/** Specify the helper text */
export let helperText = "";
@@ -86,10 +86,21 @@
/** Specify the warning state text */
export let warnText = "";
+ /**
+ * Set HTML attributes on the `label` element
+ * @type {Record}
+ */
+ export let labelAttributes = {};
+
+ /**
+ * Set HTML attributes on the `input` element
+ * @type {Record}
+ */
+ export let inputAttributes = {};
+
import { createEventDispatcher, getContext } from "svelte";
import WarningFilled from "../icons/WarningFilled.svelte";
import WarningAltFilled from "../icons/WarningAltFilled.svelte";
- import EditOff from "../icons/EditOff.svelte";
const ctx = getContext("Form");
const dispatch = createEventDispatcher();
@@ -154,6 +165,7 @@
class:bx--label--inline--sm="{size === 'sm'}"
class:bx--label--inline--md="{size === 'md'}"
class:bx--label--inline--lg="{size === 'lg' || size === 'xl'}"
+ {...labelAttributes}
>
{labelText}
@@ -193,6 +205,7 @@
class:bx--label--inline-md="{inline && size === 'md'}"
class:bx--label--inline-lg="{inline &&
(size === 'lg' || size === 'xl')}"
+ {...labelAttributes}
>
{labelText}
@@ -266,7 +279,7 @@
class:bx--layout--size-sm="{size === 'sm'}"
class:bx--layout--size-md="{size === 'md'}"
class:bx--layout--size-lg="{size === 'lg' || size === 'xl'}"
- {...$$restProps}
+ {...inputAttributes}
on:change="{onChange}"
on:input="{onInput}"
on:keydown
diff --git a/types/TextInput/TextInput.svelte.d.ts b/types/TextInput/TextInput.svelte.d.ts
index 836465ff..bb5c7781 100644
--- a/types/TextInput/TextInput.svelte.d.ts
+++ b/types/TextInput/TextInput.svelte.d.ts
@@ -1,21 +1,18 @@
import type { SvelteComponentTyped } from "svelte";
-import type { SvelteHTMLElements } from "svelte/elements";
-type RestProps = SvelteHTMLElements["input"];
+export interface TextInputProps {
+ /**
+ * Set to "char" to enable display the character counter or "word" to display the word count.
+ * @default undefined
+ */
+ counter?: undefined;
-export interface TextInputProps extends RestProps {
/**
* Set to `true` to disable the input
* @default false
*/
disabled?: boolean;
- /**
- * Set to "char" to enable display the character counter or "word" to display the word count.
- * @default undefined
- */
- counter?: "char" | "word";
-
/**
* Specify the helper text
* @default ""
@@ -129,14 +126,22 @@ export interface TextInputProps extends RestProps {
*/
warnText?: string;
- [key: `data-${string}`]: any;
+ /**
+ * Set HTML attributes on the `label` element
+ * @default {}
+ */
+ labelAttributes?: Record;
+
+ /**
+ * Set HTML attributes on the `input` element
+ * @default {}
+ */
+ inputAttributes?: Record;
}
export default class TextInput extends SvelteComponentTyped<
TextInputProps,
{
- change: CustomEvent;
- input: CustomEvent;
click: WindowEventMap["click"];
mouseover: WindowEventMap["mouseover"];
mouseenter: WindowEventMap["mouseenter"];
@@ -146,6 +151,8 @@ export default class TextInput extends SvelteComponentTyped<
focus: WindowEventMap["focus"];
blur: WindowEventMap["blur"];
paste: DocumentAndElementEventHandlersEventMap["paste"];
+ input: CustomEvent;
+ change: CustomEvent;
},
- { labelText: {} }
+ { helperText: {}; labelText: {} }
> {}