Skip to main content
⌘K
Last modified: 4/Oct/2024

Input

The input is probably the mostly used component. Use it when you need textual data that can be stored as a string from the user.

Check out the Figma documentation here.

#Usage

import { Input } from '@kinsta/stratus'

const MyComponent = () => (
  <Input
    label="Type your Jedi name"
    hasError
    errorMessage="Darth is not a Jedi name"
  />
)

#Props

The Input components interface extends the HTMLInputElement interface. So you can use any props which documented there. Also, you can utilize all the React Synthetic events (on*), and props related to styling (className, style).

#isDisabled
boolean
Set the disabled state of input
false
#isReadOnly
boolean
Set content to be readonly
false
#hasAutoFocus
boolean
Set that the input should be focused when rendered
false
#hasError
boolean
Set the error state of the input
#addonBefore
ReactNode
Content of the addon before the input box
#addonAfter
ReactNode
Content of the addon after the input box
#prefixItem
ReactNode
Content of the prefix of the input
#suffixItem
ReactNode
Content of the suffix of the input
#label
string | ReactElement<any, string | JSXElementConstructor<any>>
Content of the label
#description
string | ReactElement<any, string | JSXElementConstructor<any>>
Content of the description
#errorMessage
string | ReactElement<any, string | JSXElementConstructor<any>>
Content of the error message
#unit
string
Sets the unit of the input

#Types

  • InputProps: props of the Input component processed by stratus
  • InputInterface: InputProps extended by Omit<InputHTMLAttributes<HTMLInputElement>, 'prefix'>

Read more about types here

#See also