PandaGo Components

Appearance

Return to top
On this page

Input

This is a simple input.

Usage

This is a basic checkbox. Try changing the props and slots to see how it reacts.

Props

any v-modelTwo way binding of the input value
ComponentSkin skinIndicates which skin should be used for the component Default value: ComponentSkin.DESIGN_SYSTEM
pandads
string inputTypeIndicates the type of input Default value: text
boolean readonlyDisables the input to not allow user interaction Default value: false
inputPlaceholderAdds a placeholder to the input. This will not be shown in the Panda skin
boolean hasErrorIndicates if there is an error with the input validation Default value: false
boolean clearableIndicates if the input can be cleared or not by a button, but it does not work well in the Design System skin Default value: false
boolean loadingIndicates if the input should be in a loading state, but it does not work well in the Design System skin Default value: false

Options

Make it requiredAdds an asterisk to the label to indicate that the input is required

Slots

defaultThe label of the input, usually a text
prependAn icon prepending the input content. It can be a svg, a component, an image or whatever, but it does not work well in the Design System skin
appendAn icon appended to the input content. It can be a svg, a component, an image or whatever. This is used by default in password and search inputs.
errorThe error message to show when the input has an error
tooltipIf provided, an icon will be shown next to the input label to show the tooltip content

WARNING

Inputs with no label should not be required or have a tooltip

Type declarations

ComponentSkin

ts
export enum ComponentSkin {
	PANDA = 'panda',
	DESIGN_SYSTEM = 'ds',
}