components
Virtual Keyboard
v.1.0.0 | SaturnUsage
import { VirtualKeyboard } from '@kubit-ui-web/react-components'
1
<VirtualKeyboard digits={['0', '4', '2', '8', '7', '3', '9', '1', '6', '5']} icon={{ icon: 'CLOSE', altText: 'Remove' }} variant={'DEFAULT'} onDigitButtonClick={() => null} onRemoveButtonClick={() => null} />Props
Let's delve into the versatility of the virtualKeyboard component by examining its available props:
Uncontrolled
| Property | Type | Default | Description |
|---|---|---|---|
variant Required | String | - | VirtualKeyboard variant |
digits Required | String | - | There will be range number buttons from 0 value to 9 value placed randomly |
| icon | String | - | Icon of the remove button |
| iconAltText | String | - | Alt text of the icon |
onDigitButtonClick Required | (digit: string, event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void | - | The event occurs when the user clicks on the digit button |
onRemoveButtonClick Required | React.MouseEventHandler<HTMLButtonElement> | - | User can remove what they have clicked. The event occurs when the user clicks on the remove button |
| id | String | - | Identifier of the virtual keyboard |
| dataTestId | String | - | Test id of the virtual keyboard. Internal components will concatenate from this test id |
| ctv | Object | - | Object used for update variant styles |