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.
Use this component to display an <input>
or <textarea>
element.
Set the multiline
prop to true or false to show an <input>
or <textarea>
respectively.
When rendering an <input>
with type="number"
it is advised to implement one of the following:
raisedLabel
to true
. This will prevent the label from falling into the input when an invalid number is inputted such as e123
.
raisedLabel
to true
as soon as the onInput
callback has fired for best UX.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.
Name | Description | Default | Control |
---|---|---|---|
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 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 attributeboolean | false | |
Common Props | |||
css | CSS prop injected by Stitches CSS | - | |
data-id | Optional Id used for tests string | - | - |