diff --git a/COMPONENT_INDEX.md b/COMPONENT_INDEX.md index 99c4b048..b52a4299 100644 --- a/COMPONENT_INDEX.md +++ b/COMPONENT_INDEX.md @@ -2471,31 +2471,32 @@ export type NumberInputTranslationId = "increment" | "decrement"; ### Props -| Prop name | Kind | Reactive | Type | Default value | Description | -| :-------------- | :----------------- | :------- | :-------------------------------------------------------------- | ---------------------------------------------------------------- | ---------------------------------------------- | -| ref | let | Yes | null | HTMLInputElement | null | Obtain a reference to the input HTML element | -| value | let | Yes | number | string | "" | Specify the input value | -| size | let | No | "sm" | "xl" | -- | Set the size of the input | -| step | let | No | number | 1 | Specify the step increment | -| max | let | No | number | -- | Specify the maximum value | -| min | let | No | number | -- | Specify the minimum value | -| light | let | No | boolean | false | Set to `true` to enable the light variant | -| readonly | let | No | boolean | false | Set to `true` for the input to be read-only | -| mobile | let | No | boolean | false | Set to `true` to enable the mobile variant | -| allowEmpty | let | No | boolean | false | Set to `true` to allow for an empty value | -| disabled | let | No | boolean | false | Set to `true` to disable the input | -| iconDescription | let | No | string | "" | Specify the ARIA label for the increment icons | -| invalid | let | No | boolean | false | Set to `true` to indicate an invalid state | -| invalidText | let | No | string | "" | Specify the invalid state text | -| warn | let | No | boolean | false | Set to `true` to indicate an warning state | -| warnText | let | No | string | "" | Specify the warning state text | -| helperText | let | No | string | "" | Specify the helper text | -| label | let | No | string | "" | Specify the label text | -| hideLabel | let | No | boolean | false | Set to `true` to visually hide the label text | -| translateWithId | let | No | (id: NumberInputTranslationId) => string | (id) => defaultTranslations[id] | Override the default translation ids | -| translationIds | const | No | { increment: "increment"; decrement: "decrement" } | { increment: "increment", decrement: "decrement", } | Default translation ids | -| id | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the input element | -| name | let | No | string | -- | Specify a name attribute for the input | +| Prop name | Kind | Reactive | Type | Default value | Description | +| :-------------- | :----------------- | :------- | :-------------------------------------------------------------- | ---------------------------------------------------------------- | ----------------------------------------------- | +| ref | let | Yes | null | HTMLInputElement | null | Obtain a reference to the input HTML element | +| value | let | Yes | number | string | "" | Specify the input value | +| size | let | No | "sm" | "xl" | -- | Set the size of the input | +| step | let | No | number | 1 | Specify the step increment | +| max | let | No | number | -- | Specify the maximum value | +| min | let | No | number | -- | Specify the minimum value | +| light | let | No | boolean | false | Set to `true` to enable the light variant | +| readonly | let | No | boolean | false | Set to `true` for the input to be read-only | +| mobile | let | No | boolean | false | Set to `true` to enable the mobile variant | +| allowEmpty | let | No | boolean | false | Set to `true` to allow for an empty value | +| disabled | let | No | boolean | false | Set to `true` to disable the input | +| hideSteppers | let | No | boolean | false | Set to `true` to hide the input stepper buttons | +| iconDescription | let | No | string | "" | Specify the ARIA label for the increment icons | +| invalid | let | No | boolean | false | Set to `true` to indicate an invalid state | +| invalidText | let | No | string | "" | Specify the invalid state text | +| warn | let | No | boolean | false | Set to `true` to indicate an warning state | +| warnText | let | No | string | "" | Specify the warning state text | +| helperText | let | No | string | "" | Specify the helper text | +| label | let | No | string | "" | Specify the label text | +| hideLabel | let | No | boolean | false | Set to `true` to visually hide the label text | +| translateWithId | let | No | (id: NumberInputTranslationId) => string | (id) => defaultTranslations[id] | Override the default translation ids | +| translationIds | const | No | { increment: "increment"; decrement: "decrement" } | { increment: "increment", decrement: "decrement", } | Default translation ids | +| id | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the input element | +| name | let | No | string | -- | Specify a name attribute for the input | ### Slots diff --git a/docs/src/COMPONENT_API.json b/docs/src/COMPONENT_API.json index 5e2701ba..b81580a0 100644 --- a/docs/src/COMPONENT_API.json +++ b/docs/src/COMPONENT_API.json @@ -6134,6 +6134,16 @@ "constant": false, "reactive": false }, + { + "name": "hideSteppers", + "kind": "let", + "description": "Set to `true` to hide the input stepper buttons", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, { "name": "iconDescription", "kind": "let", diff --git a/docs/src/pages/components/NumberInput.svx b/docs/src/pages/components/NumberInput.svx index 2bc9afbf..237569db 100644 --- a/docs/src/pages/components/NumberInput.svx +++ b/docs/src/pages/components/NumberInput.svx @@ -23,6 +23,10 @@ components: ["NumberInput", "NumberInputSkeleton"] +### Hidden steppers + + + ### Light variant diff --git a/src/NumberInput/NumberInput.svelte b/src/NumberInput/NumberInput.svelte index dbd28f77..b88b142f 100644 --- a/src/NumberInput/NumberInput.svelte +++ b/src/NumberInput/NumberInput.svelte @@ -49,6 +49,9 @@ /** Set to `true` to disable the input */ export let disabled = false; + /** Set to `true` to hide the input stepper buttons */ + export let hideSteppers = false; + /** Specify the ARIA label for the increment icons */ export let iconDescription = ""; @@ -156,6 +159,7 @@ class:bx--number--readonly="{readonly}" class:bx--number--light="{light}" class:bx--number--nolabel="{hideLabel}" + class:bx--number--nosteppers="{hideSteppers}" class:bx--number--mobile="{mobile}" class="{size && `bx--number--${size}`}" > @@ -269,38 +273,40 @@ class="bx--number__invalid bx--number__invalid--warning" /> {/if} -
- -
- -
-
+ {#if !hideSteppers} +
+ +
+ +
+
+ {/if} {/if} {#if !error && !warn && helperText} diff --git a/types/NumberInput/NumberInput.d.ts b/types/NumberInput/NumberInput.d.ts index cb227327..ee0a4573 100644 --- a/types/NumberInput/NumberInput.d.ts +++ b/types/NumberInput/NumberInput.d.ts @@ -62,6 +62,12 @@ export interface NumberInputProps */ disabled?: boolean; + /** + * Set to `true` to hide the input stepper buttons + * @default false + */ + hideSteppers?: boolean; + /** * Specify the ARIA label for the increment icons * @default ""