Skip to content

Number Field

<quiet-number-field> stable since 1.0

Allows users to input and edit numbers.

<quiet-number-field 
  name="name" 
  label="Lives" 
  value="9"
  style="max-width: 200px;"
></quiet-number-field>

Examples Jump to heading

Labels and descriptions Jump to heading

You can use the label and description attributes to provide plain text labels and descriptions for the text field. If you want to provide HTML, use the label and description slots instead.

How to determine age 
<quiet-number-field name="name" label="Kitten age (months)" style="max-width: 200px;">
  <span slot="description">
    <a href="https://example.com/" target="_blank">How to determine age</a>
  </span>
</quiet-number-field>

Providing an initial value Jump to heading

Use the value attribute to provide an initial value for the text field.

<quiet-number-field 
  name="name" 
  label="Treats given today"
  value="2"
  style="max-width: 200px;"
>
</quiet-number-field>

Setting min, max, and step Jump to heading

Use the min and max attributes to set a minimum and maximum value for the number field. Use the step attribute to change the granularity the value must adhere to. 

<quiet-number-field 
  name="donation" 
  label="Monthly shelter donation"
  description="Amount in dollars (5-100)"
  min="5"
  max="100"
  step="5"
  value="25"
  style="max-width: 200px;"
></quiet-number-field>

Adding a placeholder Jump to heading

Use the placeholder attribute to show a placeholder in the text field when it's empty.

<quiet-number-field 
  type="number"
  label="Weight"
  description="Measured in pounds"
  min="0"
  step="0.5"
  placeholder="10.5"
  style="max-width: 200px;"
></quiet-number-field>

Start and end content Jump to heading

Use the start and end slots to add presentational icons or text. Avoid interactive elements such as buttons, links, etc. Works well with <quiet-icon> and <svg> elements.

$ 

<div style="max-width: 200px;">
  <quiet-number-field type="number" value="100" name="adoption" label="Adoption fee">
    <span slot="start">$</span>
  </quiet-number-field>  

  <br>

  <quiet-number-field type="number" value="30" name="playtime" label="Playtime minutes">
    <quiet-icon slot="end" name="clock"></quiet-icon>
  </quiet-number-field>

  <br>

  <quiet-number-field name="treats" value="2" label="Daily treats">
    <quiet-icon slot="start" name="cat"></quiet-icon>
    <quiet-icon slot="end" name="cookie"></quiet-icon>
  </quiet-number-field>
</quiet-number-field>

Filled and unstyled number fields Jump to heading

Set the appearance attribute to normal, filled, or unstyled to change the text field's appearance. 



<div style="max-width: 200px;">
  <quiet-number-field appearance="normal" label="Normal number field" placeholder="Enter number" style="max-width: 200px;"></quiet-number-field><br>
  <quiet-number-field appearance="filled" label="Filled number field" placeholder="Enter number" style="max-width: 200px;"></quiet-number-field><br>
  <quiet-number-field appearance="unstyled" label="Unstyled number field" placeholder="Enter number" style="max-width: 200px;"></quiet-number-field>
</div>

Pill-shaped number fields Jump to heading

Text fields can be rendered with pill-shaped edges by adding the pill attribute.

<quiet-number-field pill label="Whiskers count" style="max-width: 200px;"></quiet-number-field>

Without steppers Jump to heading

Add the without-steppers attribute to remove the stepper buttons.

<quiet-number-field 
  name="name" 
  label="Purrs per minute" 
  value="25"
  without-steppers
  style="max-width: 200px;"
></quiet-number-field>

This will remove the stepper buttons, but keyboard users can still modify the value using the arrow keys.

Changing the size Jump to heading

Use the size attribute to change the text field's size.





<div style="max-width: 200px;">
  <quiet-number-field size="xs" label="Hairball count (xs)"></quiet-number-field><br>
  <quiet-number-field size="sm" label="Meows per hour (sm)"></quiet-number-field><br>
  <quiet-number-field size="md" label="Zoomies today (md)"></quiet-number-field><br>
  <quiet-number-field size="lg" label="Treats budget (lg)"></quiet-number-field><br>
  <quiet-number-field size="xl" label="Seconds until empty bowl (xl)"></quiet-number-field>
</div>

Disabling Jump to heading

Use the disabled attribute to disable the text field.

<quiet-number-field label="Limit reached (no more cats!)" disabled style="max-width: 200px;"></quiet-number-field>

Showing labels on the side Jump to heading

With the quiet-side-label utility, you can show labels on the side instead of on top of the text field. You can control the width of the label by setting the --label-width custom property. 


<div style="max-width: 300px;">
  <quiet-number-field
    class="quiet-side-label"
    style="--label-width: 12ch;"
    name="name" 
    label="Age" 
    description="How old is your feline friend?"
  ></quiet-number-field>
  <br>
  <quiet-number-field
    class="quiet-side-label"
    style="--label-width: 12ch;"
    type="number" 
    name="email" 
    label="Weight" 
    description="In pounds, please be honest!"
  ></quiet-number-field>
</div>

Validation Jump to heading

A number of attributes can be used to enable validation using the Constraint Validation API . These include required, pattern, minlength, maxlength, min, max, and step. They work exactly like their native counterparts.




Submit Reset 
<form action="about:blank" method="get" target="_blank" style="max-width: 200px;">
  <quiet-number-field name="required" label="Number of cats" required></quiet-number-field><br>
  <quiet-number-field name="min" label="Minimum cats (min 3)" required min="3"></quiet-number-field><br>
  <quiet-number-field name="max" label="Maximum cats (max 10)" required max="10"></quiet-number-field><br>
  <quiet-button type="submit" variant="primary">Submit</quiet-button>
  <quiet-button type="reset">Reset</quiet-button>
</form>

Using custom validation Jump to heading

Use the setCustomValidity() method to make the text field invalid and show a custom error message on submit. This will override all other validation parameters. To clear the error, remove the attribute or set it to an empty string.


Submit 
<form action="about:blank" method="get" target="_blank" id="number-field__custom-validation">
  <quiet-number-field 
    name="name"
    label="Happiness level (1-10)"
    description="This field will be invalid until custom validation is removed"
    style="max-width: 200px;"
  ></quiet-number-field>
  <br>
  <quiet-button type="submit" variant="primary">Submit</quiet-button>
</form>

<script type="module">
  import { allDefined } from '/dist/quiet.js';

  await allDefined();

  const form = document.getElementById('number-field__custom-validation');
  const textField = form.querySelector('quiet-number-field');

  textField.setCustomValidity('Not so fast, bubba!');
</script>

Styling validation Jump to heading

You can style valid and invalid text fields using the :valid and :invalid pseudo classes.


Submit Reset 
<form action="about:blank" method="get" target="_blank" class="number-field__validation-pseudo">
  <quiet-number-field 
    name="name"
    label="Toy budget"
    description="Must be at least $50"
    min="50"
    required
    style="max-width: 200px;"
  ></quiet-number-field>
  <br>
  <quiet-button type="submit" variant="primary">Submit</quiet-button>
  <quiet-button type="reset">Reset</quiet-button>
</form>

<style>
  .number-field__validation-pseudo {
    quiet-number-field:valid {
      outline: solid 2px var(--quiet-constructive-stroke-mid);
      outline-offset: .5rem;
    }

    quiet-number-field:invalid {
      outline: solid 2px var(--quiet-destructive-stroke-mid);
      outline-offset: .5rem;
    }
  }
</style>

However, these selectors will match even before the user has had a chance to fill out the form. More often than not, you'll want to use the user-valid and user-invalid custom states instead. This way, validation styles are only shown after the user interacts with the form control or when the form is submitted.


Submit Reset 
<form action="about:blank" method="get" target="_blank" class="number-field__validation-custom">
  <quiet-number-field 
    name="name"
    label="Cat videos watched"
    description="Be honest…"
    required
    style="max-width: 200px;"
    value="1000"
  ></quiet-number-field>
  <br>
  <quiet-button type="submit" variant="primary">Submit</quiet-button>
  <quiet-button type="reset">Reset</quiet-button>
</form>

<style>
  .number-field__validation-custom {
    quiet-number-field:state(user-valid) {
      outline: solid 2px var(--quiet-constructive-stroke-mid);
      outline-offset: .5rem;
    }

    quiet-number-field:state(user-invalid) {
      outline: solid 2px var(--quiet-destructive-stroke-mid);
      outline-offset: .5rem;
    }
  }
</style>

API Jump to heading

Importing Jump to heading

The autoloader is the recommended way to import components but, if you prefer to do it manually, the following code snippets will be helpful.

CDN npm

To manually import <quiet-number-field> from the CDN, use the following code.

import 'https://cdn.jsdelivr.net/npm/@quietui/quiet-browser@1.6.1/dist/components/number-field/number-field.js';

To manually import <quiet-number-field> from npm, use the following code.

import '@quietui/quiet/components/number-field/number-field.js';

Slots Jump to heading

Number Field supports the following slots. Learn more about using slots

Name Description
label The number field's label. For plain-text labels, you can use the label attribute instead.
description The number field's description. For plain-text descriptions, you can use the description attribute instead.
start An icon or similar element to place before the label. Works great with <quiet-icon>.
end An icon or similar element to place after the label. Works great with <quiet-icon>.

Properties Jump to heading

Number Field has the following properties that can be set with corresponding attributes. In many cases, the attribute's name is the same as the property's name. If an attribute is different, it will be displayed after the property. Learn more about attributes and properties

Property / Attribute Description Reflects Type Default
label The number field's label. If you need to provide HTML in the label, use the label slot instead. string
description The number field's description. If you need to provide HTML in the description, use the description slot instead. string
name The name of the number field. This will be submitted with the form as a name/value pair. string
value The number field's value. string ''
placeholder A placeholder to show in the number field when it's blank. string
disabled Disables the number field. boolean false
readonly Makes the number field a read-only field. boolean false
appearance The type of number field to render. 'normal'
'filled'
'unstyled' 		'normal'
size The number field's size. 'xs'
'sm'
'md'
'lg'
'xl' 		'md'
pill Draws the number field in a pill shape. boolean false
form The form to associate this control with. If omitted, the closest containing <form> will be used. The value of this attribute must be an ID of a form in the same document or shadow root. string
required Makes the number field required. Form submission will not be allowed when this is set and the number field is blank. boolean false
pattern A regular expression the value should match to be considered valid. string
min The minimum value for date/time types. number
max The maximum value for date/time types. number
step The granularity the value must adhere to when incrementing and decrementing. number
'any'
autocomplete Tells the browser how to autocomplete the number field. See this page for available values. string
autofocus Tells the browser to focus the number field when the page loads or a dialog is shown. boolean
enterkeyhint Sets the enter key label on virtual keyboards. 'enter'
'done'
'go'
'next'
'previous'
'search'
'send'
withoutSteppers
without-steppers 		When true, the add/subtract steppers won't be displayed. boolean false

Methods Jump to heading

Number Field supports the following methods. You can obtain a reference to the element and call them like functions in JavaScript. Learn more about methods

Name Description Arguments
focus() Sets focus to the number field.
blur() Removes focus from the number field.
select() Selects all text in the number field.
setSelectionRange() Sets the start and end positions of the current text selection in the number field. start: number, end: number, direction: 'forward' <br> 'backward' <br> 'none'
setRangeText() Replaces a range of text in the number field with a new string. replacement: string, start: number, end: number, selectMode: 'select' <br> 'start' <br> 'end' <br> 'preserve'
stepDown() When a supported type is used, this method will decrease the number field's value by step. This is a programmatic change, so input and change events will not be emitted when this is called.
stepUp() When a supported type is used, this method will increase the number field's value by step. This is a programmatic change, so input and change events will not be emitted when this is called.
checkValidity() Checks if the form control has any restraints and whether it satisfies them. If invalid, false will be returned and the invalid event will be dispatched. If valid, true will be returned.
reportValidity() Checks if the form control has any restraints and whether it satisfies them. If invalid, false will be returned and the invalid event will be dispatched. In addition, the problem will be reported to the user. If valid, true will be returned.
setCustomValidity() Sets a custom validation message for the form control. If this message is not an empty string, then the form control is considered invalid and the specified message will be displayed to the user when reporting validity. Setting an empty string clears the custom validity state. message: string

Events Jump to heading

Number Field dispatches the following custom events. You can listen to them the same way was native events. Learn more about custom events

Name Description
quiet-blur Emitted when the number field loses focus. This event does not bubble.
quiet-change Emitted when the user commits changes to the number field's value.
quiet-focus Emitted when the number field receives focus. This event does not bubble.
quiet-input Emitted when the number field receives input.

CSS parts Jump to heading

Number Field exposes internal elements that can be styled with CSS using the selectors shown below. Learn more about CSS parts

Name Description CSS selector
label The element that contains the number field's label. ::part(label)
description The element that contains the number field's description. ::part(description)
visual-box The element that wraps the internal text box. ::part(visual-box)
text-box The internal text box, an <input> element. ::part(text-box)
stepper The up and down stepper buttons. ::part(stepper)
stepper-up The up stepper button. ::part(stepper-up)
stepper-down The down stepper button. ::part(stepper-down)

Custom States Jump to heading

Number Field has the following custom states. You can target them with CSS using the selectors shown below. Learn more about custom states

Name Description CSS selector
disabled Applied when the number field is disabled. :state(disabled)
blank Applied when the number field has a blank value. :state(blank)
focused Applied when the number field has focus. :state(focused)
user-valid Applied when the number field is valid and the user has sufficiently interacted with it. :state(user-valid)
user-invalid Applied when the number field is invalid and the user has sufficiently interacted with it. :state(user-invalid)

Dependencies Jump to heading

Number Field automatically imports the following elements. Sub-dependencies are also included in this list.

Search this website Toggle dark mode Get the Figma file Get the code on GitHub

    No results found