InputBase InputBase does not have appearance settings including default border, color, outline, and padding. It aims to be a simple building block for creating an input.
Import copy import { InputBase } from '@trendmicro/react-styled-ui' ;
Usage
EDITABLE EXAMPLE
copy < InputBase placeholder = " Placeholder text " />
Attributes Standard input attributes are supported, e.g., type, disabled, readOnly, required, etc.
type
EDITABLE EXAMPLE
copy < Grid
templateColumns = " min-content auto "
columnGap = " 2x "
rowGap = " 3x "
>
< Grid >
< TextLabel > Name: </ TextLabel >
</ Grid >
< Grid >
< InputBase type = " text " placeholder = " John Doe " />
</ Grid >
< Grid >
< TextLabel > Password: </ TextLabel >
</ Grid >
< Grid >
< InputBase type = " password " placeholder = " Password " />
</ Grid >
</ Grid >
disabled
EDITABLE EXAMPLE
copy < Stack directin = " column " spacing = " 4x " >
< InputBase disabled placeholder = " Placeholder text " />
< InputBase disabled placeholder = " Placeholder text " defaultValue = " Disabled " />
</ Stack >
readOnly
EDITABLE EXAMPLE
copy < Stack directin = " column " spacing = " 4x " >
< InputBase readOnly placeholder = " Placeholder text " />
< InputBase readOnly placeholder = " Placeholder text " defaultValue = " Read-only " />
</ Stack >
required
EDITABLE EXAMPLE
copy < InputBase
required
placeholder = " Placeholder text "
px = " 2x "
py = " 1x "
border = { 1 }
borderColor = " transparent "
_invalid = { {
borderColor : 'red:50' ,
} }
/>
Props Name Type Default Description disabled boolean If true, the user cannot interact with the control. This sets aria-disabled=true and you can style this state by passing the _disabled prop. readOnly boolean If true, prevents the value of the input from being edited. isInvalid boolean If true, the input will indicate an error. You can style this state by passing the _invalid prop.
