Skip to content

InputPercent

Status: Stable

InputPercent proactively eliminates errors by restricting and formatting data to align with user expectations and business requirements.

Best practices

  • ‘Smart’ value – ok as placeholders or pre-filled input
  • Help message – provides additional formatting expectations (for example ‘e.g. 20%; don’t add examples as placeholders
  • Label – always included, presents clear description of anticipated data
  • Mask – (00%) data formats as a user types
  • Mobile keyboard – Tel (numbers only)
  • Placeholder – (%) shows that a percent value is anticipated. The percent sign persists as the user types to keep context front-of-mind
  • Restrictions – 3 numeric characters only; default width decreased to reflect anticipated value
  • Width – default decreased to reflect anticipated value

Examples

Priority

Props

<InputPercent>

allowNegative

boolean
Flag to enable the user to be able to supply a '-' to indicate the value should be negative.

numberOfDigits

number
Enables ability to limit the number of digits the input allows in total. This won't take decimals into account.

decimalScale

number
Enables the ability to support decimals.

defaultValue

string | number

value

string | number

label

string
A label for the input

style

Deprecated
CSSProperties

className

string
Class on outer container element

id

string
ID for the input element.

placeholder

string

inputMode

"decimal" | "email" | "none" | "numeric" | "search" | "tel" | "text" | "url"
Hints at the type of data that might be entered by the user while editing the element or its contents

onFocus

FocusEventHandler<T>

onBlur

FocusEventHandler<T>

onChange

ChangeEventHandler<T>

name

string

disabled

boolean

autoComplete

string

maxLength

number

required

boolean

error

boolean
Flag to indicate if input is in an error (red outline) state. Use in conjunction with errorMessage to display a red error message.

fullWidth

boolean

feedbackMessages

Array<{
feedbackType: "error" | "info" | "success"
message: string
id?: string
}>
A list of feedback messages to show for the group.

helpMessage

ReactNode
Optional help text shown below the input

errorMessage

ReactNode
Red text to be shown indicating the user is in an error state.

tooltip

ReactNode
Optional tooltip shown via an icon next to the label

tooltipPlacement

"bottom" | "left" | "right" | "top"
Positioning of tooltip

inputRef

(instance: HTMLInputElement | null) => void | RefObject<HTMLInputElement>
Gives access to the input DOM node.