+ Regular
+ Filled
+ Outlined
+
+
+
diff --git a/packages/docs/src/routes/components/number-field.md b/packages/docs/src/routes/components/number-field.md
new file mode 100644
index 00000000..1efabc1e
--- /dev/null
+++ b/packages/docs/src/routes/components/number-field.md
@@ -0,0 +1,81 @@
+---
+title: Number Field Component
+description: The number field component accepts numeric input from users.
+keywords: number fields, svelte materialify number field, svelte number field component, svelte number input component
+related:
+ - components/selects
+ - components/sliders
+ - api/NumberField
+---
+
+# Number Fields
+
+Number fields components are used for collecting numerical input from users.
+
+
+Any property which is not in the API list will be directly forwarded to the input element.
+
+
+## API
+
+- [NumberField](/api/NumberField/)
+
+## Usage
+
+### Value
+
+The `value` property on a `NumberField` is a number, not a string. (This is unlike HTML ``, but is like Svelte's normal [numeric binding](https://svelte.dev/tutorial/numeric-inputs).)
+
+### Basic Use
+
+
+
+
+## Examples
+
+### Built-In Validation
+
+Number fields accept the html `min`, `max`, and `step` properties and show validation hints as needed.
+
+
+### Custom Validation
+
+In addition to the `min`, `max`, and `step` props, `NumberField` exposes validation through the `rules` prop. The prop accepts a array of callbacks with the input value as an arguement. The callback should return a string message if validation fails, or `false` if it passes. By default this runs a check whenever the user types something, to delay the validation till the input loses focus use `validateOnBlur`.
+
+```js
+const rules = [
+ (value) => {
+ if (condition) return 'Error Message';
+ return false;
+ },
+];
+```
+
+
+
+### Dense
+
+You can reduces the number field height with `dense` prop.
+
+
+### Disabled and Readonly
+
+Number fields can be `disabled` or `readonly`.
+
+
+### Icons
+
+You can add icons to the number field with `prepend`, `append`, `prepend-outer` and `append-outer` slots.
+
+
+### Clearable
+
+When `clearable`, you can customize the clear icon with clear-icon.
+
+
+### Label
+
+Number field label can be defined in the default slot.
+
+
+
diff --git a/packages/docs/src/util/routes.js b/packages/docs/src/util/routes.js
index 7d4471e3..64f1ee12 100644
--- a/packages/docs/src/util/routes.js
+++ b/packages/docs/src/util/routes.js
@@ -63,6 +63,7 @@ export default [
text: 'Forms',
items: [
{ text: 'Text Field', href: '/components/text-field/' },
+ { text: 'Number Field', href: '/components/number-field/' },
{ text: 'Textarea', href: '/components/textarea/' },
{ text: 'Selects', href: '/components/selects/' },
{ text: 'Sliders', href: '/components/sliders/' },
diff --git a/packages/svelte-materialify/@types/NumberField.d.ts b/packages/svelte-materialify/@types/NumberField.d.ts
new file mode 100644
index 00000000..90f62e1e
--- /dev/null
+++ b/packages/svelte-materialify/@types/NumberField.d.ts
@@ -0,0 +1,63 @@
+import { SvelteComponent } from './shared';
+
+interface NumberFieldProps {
+ /** Classes to add to text field wrapper. */
+ class?: string;
+ /** Value of the text field. */
+ value?: number;
+ /** Minimum allowed number */
+ min?: number;
+ /** Maximum allowed number */
+ max?: number;
+ /** Amount by which to increment number, also used for validation */
+ step?: number;
+ /** Color class of the text field when active. */
+ color?: string;
+ /** Whether text field is the `filled` material design variant. */
+ filled?: boolean;
+ /** Whether text field is outlined by elevation. */
+ solo?: boolean;
+ /** Whether text field is the `outlined` material design variant. */
+ outlined?: boolean;
+ /** Whether text field do not have elevation. */
+ flat?: boolean;
+ /** Whether text field height is reduced. */
+ dense?: boolean;
+ /** Whether text field has rounded corners. */
+ rounded?: boolean;
+ /** Whether text field has a clear button. */
+ clearable?: boolean;
+ /** Whether text field is read-only. */
+ readonly?: boolean;
+ /** Whether text field is disabled. */
+ disabled?: boolean;
+ /** Placeholder content for text field. */
+ placeholder?: string;
+ /** Hint text. */
+ hint?: string;
+ /** Error messages to display. */
+ messages?: string[];
+ /**
+ * A list of validator functions that take the text field value and return an error
+ * message, or `true` otherwise.
+ */
+ rules?: ((value: string) => string | true)[];
+ /** Number of error messages to display. Defaults to one. */
+ errorCount?: number;
+ /** Whether to delay validation until blur. */
+ validateOnBlur?: boolean;
+ /** Whether text field has error. */
+ error?: boolean;
+ /** Whether text field has `success` class. */
+ success?: boolean;
+ /** Id of the text field. Defaults to a random uid. */
+ id?: string;
+ /** Styles to add to text field wrapper. */
+ style?: string;
+ /** Reference to text field element in the DOM. */
+ inputElement?: Element;
+}
+
+declare class NumberField extends SvelteComponent {}
+
+export default NumberField;
diff --git a/packages/svelte-materialify/@types/Select.d.ts b/packages/svelte-materialify/@types/Select.d.ts
index c13458db..cc8b4180 100644
--- a/packages/svelte-materialify/@types/Select.d.ts
+++ b/packages/svelte-materialify/@types/Select.d.ts
@@ -5,8 +5,11 @@ interface SelectProps {
class?: string;
/** Whether select is opened. */
active?: boolean;
- /** Value of the select. */
- value?: number[] | string[];
+ /**
+ * Value of the select.
+ * If multiple is true, this will be an array; otherwise a single value.
+ */
+ value?: (number[] | string[]) | number | string;
/** List of items to select from. */
items?: { name: string | number, value: string | number }[];
/** Whether select is the `filled` material design variant. */
diff --git a/packages/svelte-materialify/@types/index.d.ts b/packages/svelte-materialify/@types/index.d.ts
index e929400b..2d37aa9a 100644
--- a/packages/svelte-materialify/@types/index.d.ts
+++ b/packages/svelte-materialify/@types/index.d.ts
@@ -32,6 +32,7 @@ export { default as ListItemGroup } from './ListItemGroup';
export { default as MaterialApp } from './MaterialApp';
export { default as Menu } from './Menu';
export { default as NavigationDrawer } from './NavigationDrawer';
+export { default as NumberField } from './NumberField';
export { default as Overlay } from './Overlay';
export { default as ProgressCircular } from './ProgressCircular';
export { default as ProgressLinear } from './ProgressLinear';
diff --git a/packages/svelte-materialify/src/components/NumberField/NumberField.svelte b/packages/svelte-materialify/src/components/NumberField/NumberField.svelte
new file mode 100644
index 00000000..f154272e
--- /dev/null
+++ b/packages/svelte-materialify/src/components/NumberField/NumberField.svelte
@@ -0,0 +1,259 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {#if clearable && value !== null}
+
+
+
+
+
+
+ {/if}
+
+
+
+
+
+
+
+ {hint}
+ {#each messages as message}{message}{/each}
+ {#each errorMessages.slice(0, errorCount) as message}{message}{/each}
+
+
+
+
+
+
\ No newline at end of file
diff --git a/packages/svelte-materialify/src/components/NumberField/index.js b/packages/svelte-materialify/src/components/NumberField/index.js
new file mode 100644
index 00000000..54978d09
--- /dev/null
+++ b/packages/svelte-materialify/src/components/NumberField/index.js
@@ -0,0 +1 @@
+export { default } from './NumberField.svelte';
diff --git a/packages/svelte-materialify/src/index.js b/packages/svelte-materialify/src/index.js
index 2fd105b5..974c8e9d 100644
--- a/packages/svelte-materialify/src/index.js
+++ b/packages/svelte-materialify/src/index.js
@@ -10,6 +10,7 @@ export { default as Button } from './components/Button';
export { default as ButtonGroup, ButtonGroupItem } from './components/ButtonGroup';
export { default as Input } from './components/Input';
export { default as TextField } from './components/TextField';
+export { default as NumberField } from './components/NumberField';
export { default as Textarea } from './components/Textarea';
export { default as Slider } from './components/Slider';
export { default as Select } from './components/Select';