Back to Fluentui

SpinButtonBestPractices

packages/react-components/react-spinbutton/stories/src/SpinButton/SpinButtonBestPractices.md

4.40.2-hotfix2769 B
Original Source

Best practices

Do

  • Consider using SpinButton with underline or outline appearances. When the contrast ratio against the immediate surrounding color is less than 3:1, consider using underline or outline styles which has a bottom border stroke. But please ensure the color of bottom border stroke has a sufficient contrast which is greater than 3 to 1 against the immediate surrounding.

Don't

  • Don’t place SpinButton on a surface which doesn’t have a sufficient contrast. The colors adjacent to the input should have a sufficient contrast. Particularly, the color of input with filled darker and lighter styles needs to provide greater than 3 to 1 contrast ratio against the immediate surrounding color to pass accessibility requirements.