Input

Props

Prop	Type	Default	Required
variant	"primary" \| "secondary" \| "tertiary" \| "default" \| "warning"	"default"	yes	style of the button
id	string	""	yes	id of the input
type	string	"text"	no	sets the type of the input
OTPLength	number	6	no	sets the amount of fields for the OTP input
labelClassName	string	""	no	set additional classNames for the label
className	string	""	no	set additional classNames

Additionally you can add every prop you would use with the default <input /> element.

⚠️

Note that the className is added to the <input /> element and the wrapper.

Importing Input

import { Input } from "cerberusui"

Variants

<Input variant="default" />
<Input variant="primary" />
<Input variant="secondary" />
<Input variant="tertiary" />
<Input variant="warning" />

Options

Placeholder

<Input variant="default" placeholder="Some placeholder" />

Label

The children of the Input will be set as label.

<Input variant="default">Label</Input>

Label

Types

All Inputs where the type is not set to file, checkbox, radio, button, submit, reset, color, range or OTPwill be rendered as the default input.

File

For the file input to work it is mandatory to specify an id otherwise the component won't work.

<Input variant="default" type="file" id="fileInput" />

Checkbox

<Input variant="default" type="checkbox" id="checkboxInput">Checkbox Label</Input>

Checkbox Label

Radio

<Input variant="default" type="radio" id="radioInput">Radio Label</Input>

Radio Label

Button Submit Reset

The button, submit and reset input are rendered as buttons.

<Input variant="default" type="button" value="Button" />
<Input variant="default" type="submit" />
<Input variant="default" type="reset" />

Color

<Input variant="default" type="color" id="colorInput">Color Label</Input>

Color Label

Range

<Input variant="default" type="range" id="rangeInput">Range Label</Input>

Range Label

OTP

With the OTPLength prop you can control the amount of inputs that are displayed. The default value is 6.

<Input variant="default" type="OTP" OTPLength={6} id="otpInput">OTP Label</Input>

OTP Label

When you want to get the value of the input you can add a function to the onComplete prop which will run with the input value passed when the input is complete.

<Input 
    variant="default" 
    type="OTP" 
    OTPLength={6} 
    id="otpInput" 
    onComplete={(value) => setPin(value)}>
        Enter Pin
</Input>

Enter Pin

Pin: Please enter a Pin

Dropdown Join