Number Field

Installation

import { NumberField } from "@octopusdeploy/design-system-components"

Properties

Using the Number Field component

The NumberField component should only be used when you want user input to be restricted to entering a number. If your input is a string please use the TextField component.

The NumberField component is built off the TextField component so much of the underlying features are shared. The key difference is that you do not need to provide a type as it is pre-set to use a type of number. It also comes with three optional extra properties, min, max and step.

For example:

                                                        
                                                        
                                                            <NumberField
                                                            value={value}
                                                            onChange={onChange}
                                                            label="Input Label"
                                                            description="Input Description"
                                                            error={error}
                                                        />
                                                        
                                                            

The browser will sometimes include the stepper arrows to allow the user to increase and/or decrease the value using their mouse or by tapping. These will be automatically added into the NumberField component using the default browser designs (therefore it may vary slightly between browsers and OS).

Example of Min/Max properties

Negative Min/Max

Example of Step Properties

Decimal Step

Expandable form sections

No changes are needed to NumberField to use in Expandable form sections as they will always require their own label and optional Description associated with the input.

Form Descriptions

Form descriptions allow you to pass in a string, with the option to include an inline code descriptor or link. If you want to include a code descriptor or link you need to follow a particular format, this allows you to include as many links or code descriptors as you need while also ensuring a consistent application of styling and formatting.

For example:

                                                        
                                                        
                                                             descriptionText`Set ${descriptionCode("itemEnabled")} to true or see our ${descriptionLink("guide", "/docs/guide")} for more details.`,
                                                        
                                                            

The above code will render the following:

Adding a Popover to the label

This is used to display a Popover with more content explaining the context of a field. It should only be used when the Helper Text is not sufficient.

To include this you can pass the PopoverBasicHelp component to the popover prop, e.g.:

                                                        
                                                        
                                                            <NumberField 
                                                          label="With Popover"
                                                          value="Popover"
                                                          popover={<PopoverBasicHelp placement="right-start" description="A popover" />}
                                                          onChange={handleChange} 
                                                        />
                                                        
                                                            

Suffix and Prefix

As the NumberField is built off the Textfield component it also accepts a suffix and a prefix which can be used together or on their own. The suffix and prefix will not be saved with the value, they are for display purposes only.

When using a string both the suffix and prefix are capped at 3 characters, but are not case insensitive. The component will adjust the spacing in the component according to the size of the text automatically.

Prefix

The prefix, which appears at the start of the component accepts a string as mentioned above but it also allows a Design System Icon. The prefix does not allow interactive elements, if you require interactive elements you should use a suffix .

The icon should be set to size of 20 and include relevant aria-label for accessibility purposes.

                                                        
                                                        
                                                            <TextField label="Icon prefix" onChange={handleChange} prefix={<MagnifyingGlassIcon size={20} ariaLabel="Search" />} />
                                                        
                                                            

If you need an Icon that that is not currently supported please follow the Proposing an icon guidelines or reach out to #team-frontend-foundations-requests.

Suffix

The suffix appears at the end of the input and can be a string as mentioned above, or a button. Buttons should be used for interactive elements such as dropdown menus.

The button can be passed into the suffix prop following the example below.

• Button importance: ghost
• Button size: medium
• Icon size should be 20

                                                        
                                                        
                                                            <TextField label="With suffix" onChange={handleChange} suffix={<Button icon={<CaretDownIcon size={20} />} onClick={() => {}} importance="ghost" size="medium" />} />
                                                        
                                                            

Code Sub-components

Sub-components are used to compose the Form components in the Design System, however they are not exposed via the design system package and therefore cannot be used on their own. Instead, use the packaged components we ship, e.g. TextField , etc.

Should you require changes to the sub components please reach out in #team-frontend-foundations-requests or follow the Contribution guidelines.

NumberField is a special type of form input in that it is built from the TextField component, as a result it shares many of the features of TextField. While it is not technically a sub component it is dependant on TextField.

Related Components

Help and support