Terminal

Terminal is a text based user interface.

Import#


import { Terminal } from 'primereact/terminal';
import { TerminalService } from 'primereact/terminalservice';

Basic#

Terminal is interacted with TerminalService api using command, response and clear events. The command event requires a callback to handle the commands, the responseemits the response of the command and emitting clear reset the terminal.

Enter "date" to display the current date, "greet {0}" for a message, "random" to get a random number and "clear" to clear all commands.

Welcome to PrimeReact

primereact $


<Terminal 
    welcomeMessage="Welcome to PrimeReact" 
    prompt="primereact $" 
    pt={{
        root: 'bg-gray-900 text-white border-round',
        prompt: 'text-gray-400 mr-2',
        command: 'text-primary-300',
        response: 'text-primary-300'
    }} 
/>

Accessibility#

Screen Reader

Terminal component has an input element that can be described with aria-label or aria-labelledby props. The element that lists the previous commands has aria-live so that changes are received by the screen reader.

Keyboard Support

Key	Function
tab	Moves focus through the input element.
enter	Executes the command when focus in on the input element.