NumPad

Example

Import

JavaScript

import '@sbddesign/bui-ui/numpad.js'

React

import { BuiNumpadReact as BuiNumpad } from '@sbddesign/bui-ui/react'

Usage

JavaScript

<bui-numpad></bui-numpad>

React

<BuiNumpad></BuiNumpad>

Properties

Property	Attribute	Type	Required	Reflected	Description
disabled	disabled	boolean	No	Yes	Whether the numpad is disabled

Behavior

• Number Input: The numpad provides a 3x4 grid of number buttons (0-9) plus backspace
• Disabled State: When disabled is true, all buttons become non-interactive
• Button Layout:
  • Numbers 1-9 in a 3x3 grid
  • 0 and backspace in the bottom row
  • Backspace button for deleting input
• Event Handling: Each button emits click events with the corresponding value
• Accessibility: Proper keyboard navigation and screen reader support

Events

The numpad component emits click events for each button:

• Number buttons (0-9): Emit click event with the number value
• Backspace button: Emits click event for deletion action
• Disabled state: No events are emitted when disabled