Geist UI

Keyboard

Display keyboard input that triggers an action.

The Keyboard can only display layout styles, if you need to bind the keyboard events, please read subsection useKeyboard.

f

Code Editor

<Keyboard>f</Keyboard>

<Keyboard>f</Keyboard>

⌘⇧⌥⌃

Code Editor

<div>
  <Keyboard command mr="10px" />
  <Keyboard shift mr="10px" />
  <Keyboard option mr="10px" />
  <Keyboard ctrl mr="10px" />
</div>

<div>
  <Keyboard command mr="10px" />
  <Keyboard shift mr="10px" />
  <Keyboard option mr="10px" />
  <Keyboard ctrl mr="10px" />
</div>

⌘f⇧e⌥⌃b

Code Editor

<div>
  <Keyboard command mr="10px">f</Keyboard>
  <Keyboard shift mr="10px">e</Keyboard>
  <Keyboard option ctrl mr="10px">b</Keyboard>
</div>

<div>
  <Keyboard command mr="10px">f</Keyboard>
  <Keyboard shift mr="10px">e</Keyboard>
  <Keyboard option ctrl mr="10px">b</Keyboard>
</div>

Attribute	Description	Type	Accepted values	Default
command	show command key	`boolean`	-	`false`
shift	show shift key	`boolean`	-	`false`
option	show option key	`boolean`	-	`false`
ctrl	show ctrl key	`boolean`	-	`false`
...	native props	`KeygenHTMLAttributes`	`'keyType', 'className', ...`	-

Contributors

Geist is an open source project from the community.