Skip to content
GitHub

Keyboard

Renders a virtual keyboard

import { type ChangeEvent, useRef, useState } from "react";


import { Input } from "@/components/ui/pxl/input";
import { Keyboard, type KeyboardRef } from "@/components/ui/pxl/keyboard";


export default function KeyboardPreview() {
  const [value, setValue] = useState("");
  const input = useRef<HTMLInputElement>(null);
  const keyboard = useRef<KeyboardRef>(null);


  const onChangeInput = (event: ChangeEvent<HTMLInputElement>): void => {
    setValue(event.target.value);
    keyboard.current?.setInput(event.target.value);
  };


  const onKbChange = (value: string) => {
    setValue(value);


    requestAnimationFrame(() => {
      input.current?.focus();
    });
  }


  return (
    <div className="flex flex-col gap-2.5 items-center justify-center">
      <div className="size-full flex flex-col gap-2">
        <Input
          autoFocus
          ref={input}
          value={value}
          placeholder={"Tap on the virtual keyboard to start"}
          onChange={onChangeInput}
          name="preview"
        />
        <Keyboard
          inputName="preview"
          enableKeyNavigation
          keyboardRef={keyboard}
          onChange={onKbChange}
          onSubmit={() => console.log("onSubmit")}
        />
      </div>
    </div>
  );
}

About

Section titled “About”

The <Keyboard /> component uses the simple-keyboard component by hodgef.

Installation

Section titled “Installation”
pnpm dlx shadcn@latest add pxl-ui/registry/keyboard

Usage

Section titled “Usage”
import { Keyboard } from "@/components/ui/pxl/keyboard"
<Keyboard />

Variants

Section titled “Variants”

Use the variant prop to change the variant of the keyboard.

Primary

Success

Danger

Warning

Info

Secondary

Outline

Ghost

import { Keyboard } from "@/components/ui/pxl/keyboard";


export default function KeyboardVariants() {
  return (
    <div className="w-full flex flex-col gap-2.5 items-start justify-center">
      <div>
        <h2>Primary</h2>
        <Keyboard
          inputName="primary"
          variant="primary"
          physicalKeyboardHighlight={false}
          className="bg-popover p-1.25 rounded-md" />
      </div>
      <div>
        <h2>Success</h2>
        <Keyboard
          inputName="success"
          variant="success"
          physicalKeyboardHighlight={false}
          className="bg-popover p-1.25 rounded-md" />
      </div>
      <div>
        <h2>Danger</h2>
        <Keyboard
          inputName="danger"
          variant="danger"
          physicalKeyboardHighlight={false}
          className="bg-popover p-1.25 rounded-md" />
      </div>
      <div>
        <h2>Warning</h2>
        <Keyboard
          inputName="warning"
          variant="warning"
          physicalKeyboardHighlight={false}
          className="bg-popover p-1.25 rounded-md" />
      </div>
      <div>
        <h2>Info</h2>
        <Keyboard
          inputName="info"
          variant="info"
          physicalKeyboardHighlight={false}
          className="bg-popover p-1.25 rounded-md" />
      </div>
      <div>
        <h2>Secondary</h2>
        <Keyboard
          inputName="secondary"
          variant="secondary"
          physicalKeyboardHighlight={false}
          className="bg-popover p-1.25 rounded-md" />
      </div>
      <div>
        <h2>Outline</h2>
        <Keyboard
          inputName="outline"
          variant="outline"
          physicalKeyboardHighlight={false}
          className="bg-popover p-1.25 rounded-md" />
      </div>
      <div>
        <h2>Ghost</h2>
        <Keyboard
          inputName="ghost"
          variant="ghost"
          physicalKeyboardHighlight={false}
          className="bg-popover p-1.25 rounded-md" />
      </div>
    </div>
  );
}

Sizes

Section titled “Sizes”

Use the size prop to change the size of the keyboard.

2XS

XS

SM

MD

LG

import { Keyboard } from "@/components/ui/pxl/keyboard";


export default function KeyboardSizes() {
  return (
    <div className="w-full min-h-92 flex flex-col gap-2.5 items-start justify-center">
      <div>
        <h2>2XS</h2>
        <Keyboard
          inputName="2xs"
          size="2xs"
          physicalKeyboardHighlight={false}
          className="bg-popover" />
      </div>
      <div>
        <h2>XS</h2>
        <Keyboard
          inputName="xs"
          size="xs"
          physicalKeyboardHighlight={false}
          className="bg-popover" />
      </div>
      <div>
        <h2>SM</h2>
        <Keyboard
          inputName="sm"
          size="sm"
          physicalKeyboardHighlight={false}
          className="bg-popover" />
      </div>
      <div>
        <h2>MD</h2>
        <Keyboard
          inputName="md"
          size="md"
          physicalKeyboardHighlight={false}
          className="bg-popover" />
      </div>
      <div>
        <h2>LG</h2>
        <Keyboard
          inputName="lg"
          size="lg"
          physicalKeyboardHighlight={false}
          className="bg-popover" />
      </div>
    </div>
  );
}