No Preview

Sorry, but you either have no stories or none are selected somehow.

If the problem persists, check the browser console, or the terminal you've run Storybook from.



Input & Text Area


Use this component to display an <input> or <textarea> element.


Uncontrolled Component Demo


Informative message holder


Usage


Set the multiline prop to true or false to show an <input> or <textarea> respectively.


type="number"


When rendering an <input> with type="number" it is advised to implement one of the following:


    

  • Set raisedLabel to true. This will prevent the label from falling into the input when an invalid number is inputted such as e123.

      

    • Consider setting raisedLabel to true as soon as the onInput callback has fired for best UX.
      • 

    

    • 

  • Use clearScientificNotation prop to block possibility of inputting invalid numbers by rejecting e-notation numbers and + from being inputted.
It will also clear the value of the input on blur whenever the value is invalid. This will prevent the input from drawing the label over the value.
    • 



Which ones to implement will highly depend on the use case.


Props


NameDescriptionDefaultControl 
label*
Label Element
string
-
placeholder
Placeholder text
string
-
info
Informative text displayed under the input
string
-
multiLine
If true, will render a textarea element
boolean
false
error
Sets error state on input
boolean
false
type
"number" | "text" | "color" | "search" | "button" | "time" | "image" | "checkbox" | "radio" | "hidden" | "reset" | (string & {}) | "tel" | "url" | "email" | "date" | "submit" | "datetime-local" | ... 5 more ...
-
raisedLabel
If true, will keep the label in a raised position
boolean
false
clearScientificNotation
Clears the value on blur if it's invalid and blocks entering e notation numbers into.
This works only with number type fields.
For example, by default, user can type i.e.: 1e or just + into the field, and such values will be considered
invalid value, and the read value will be an empty string.
This can break floating label (which on empty value is rendered inside the input) and data in forms.
This prop allows you to work around this issue by sacrificing the e notation and clearing some invalid inputs.
boolean
-
infoEllipsis
If true, will apply ellipsis text overflow to info text
boolean
false
rightElement
Renders rightmost inside the input
ReactNode
--
height
If there is a value, will render the textarea in fix height. Only applicable when multiLine set to true
number
-
disabled
Sets the disabled attribute
boolean
false
Common Props
css
CSS prop injected by Stitches
CSS
-
data-id
Optional Id used for tests
string
--