Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file not shown.
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

the "Increments by _" text is a little hard to tie to the specific inputs because of the placement. would it look better to move them above and left align? or maybe add a new # annotation that points to both and explains the different increments?

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

++ Agree that adding those captions as titles would be helpful (like in https://patternfly-org-pr-4624-site.surge.sh/components/alert/design-guidelines#alerts)

Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file not shown.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file not shown.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,13 @@ id: Number input
section: components
---

import '../components.css';

## Elements
<img src="./img/number_input_anatomy.png" alt="Number input elements" width="537px"/>

<div class="ws-docs-content-img">
![Number input elements](./img/number_input_anatomy.svg)
</div>

1. **Label:** Indicates what value the user should input in the numeric field.
2. **Input field:** Area for the user to type in their numeric input.
Expand All @@ -30,7 +35,10 @@ section: components
* Determine an increment size relative to your specific value range. Scale your increment size to accommodate for the types of values users will input in context.
For example: If your range is from 0-10, have increments of 1, but if your range is from 0-100, have increments of 10.
* Include unit symbols to the right of the text input and increase button, depending on your use case. Always use a unit’s standard abbreviation or symbol. For a list of recommended symbols, see our <a href="https://v4-archive.patternfly.org/v4/ux-writing/units-and-symbols#writing-units-of-measure">Units and symbols page</a>.
<img src="./img/number_input_states.png" alt="Number input states" width="740px"/>

<div class="ws-docs-content-img">
![Number input states](./img/number_input_states.svg)
</div>

## Variations
Number inputs can function in one of two ways:
Expand All @@ -46,7 +54,9 @@ A number input with thresholds disables each button when a user’s numeric inpu

When adding thresholds to a number input, be sure to inform users with text to minimize their risk for input errors. If a number input for the number of storage drives has a maximum input value of 20, communicate this limit in helper text: <i>Maximum capacity 20</i>.

<img src="./img/with_threshold.png" alt="Number input with threshold" width="474px"/>
<div class="ws-docs-content-img">
![Number input with threshold](./img/with_threshold.svg)
</div>

## Accessibility
Consider the following guidance to ensure that your number input is <a href="https://www.section508.gov/">508 compliant</a>:
Expand Down