Input

Types

• Input supports 4 types: text, password, number and email.
• Default type is text.

Sizes

• Input supports 4 sizes sm, md, lg and responsive and can be changed by passing the size prop.
• Default size is lg.

• With size responsive, the component will be responsive to the viewport.

Screen prefix	Screen width	Component size
xs → xl	0px → 1279px	sm
xl → 3xl	1280px → 1919px	md
3xl → ∞	1920px → ∞	lg

With Icons

• Input supports icons from the @ocean-network-express/magenta-ui/icons package.
• There are 2 props: leftContent and rightContent.

Disabled

• Disabled state can be enabled by setting disabled prop to true.

• Readonly can be enabled by setting readOnly prop to true.

Loading

• Loading state can be enabled by setting loading prop to true.

Full width

• Full width can be enabled by setting fullWidth prop to true.

Label

• Input supports adding label and helperText props.
• Label text can be changed by passing the label prop.

• Input component allows to include additional content with the main label.
  • You can use the labelPrefix prop to place content before the main label text, such as an icon (e.g., a search 🔍 icon) or a short word.
  • For content that should appear after the main label, like units (e.g., (MB)), an info icon (ⓘ), or other helpful details, use the labelSuffix prop.

Alignment Label

• Input supports 3 type of Alignment Label top, left and inline and can be changed by passing the labelAlignment prop.
• Default Alignment is top.
• When using inline Alignment with leftContent, the leftContent will be override by Label

Helper text

• Helper text can be changed by passing the helperText prop.
• The helper text can be displayed in 2 ways: inline and tooltip and can be changed by passing the renderHelperType prop.

Inline (default)

Tooltip

States

• Currently, Input supports 3 state is error, warning and success and can be changed by passing the state prop.

• As use case of the tooltip, you can use the renderHelperType='tooltip' to to display the error message in the tooltip.

• The tooltip content render by helperText prop value, and it only accept string type for this case. Otherwise, it accept ReactNode when using with default validation.

Inline (default)

Tooltip