Input

An input is a form field that allows users to enter and edit short and free-form text, such as plain text, numbers, and passwords.

Types

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

Source Code

import { Input } from '@ocean-network-express/magenta-ui/react';

export function Types() {
  return (
    <div className="flex gap-y-4 flex-col">
      <Input placeholder="Type default" />
      <Input type="password" placeholder="Type password" />
      <Input type="number" placeholder="Type number" />
      <Input type="email" placeholder="Type email" />
    </div>
  );
}

Sizes

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

Source Code

import { Input } from '@ocean-network-express/magenta-ui/react';

export function Sizes() {
  return (
    <div className="flex gap-x-4">
      <Input size="lg" placeholder="Large size" />
      <Input size="md" placeholder="Medium size" />
      <Input size="sm" placeholder="Small size" />
    </div>
  );
}

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

Responsive input

helper text

Source Code

import { Input } from '@ocean-network-express/magenta-ui/react';

export function InputResponsiveSize() {
  return (
    <div className="flex gap-x-4">
      <Input
        size="responsive"
        placeholder="Responsive size"
        label="Responsive input"
        helperText="helper text"
      />
    </div>

With Icons

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

Source Code

import { CheckCircleOutline, VesselFrontOutline } from '@ocean-network-express/magenta-ui/icons';
import { Input } from '@ocean-network-express/magenta-ui/react';

export function InputWithIcons() {
  return (
    <div className="flex gap-x-4">
      <Input placeholder="Left icon" leftContent={<VesselFrontOutline />} />
      <Input placeholder="Right icon" rightContent={<CheckCircleOutline />} />
      <Input
        placeholder="With icons"
        leftContent={<VesselFrontOutline />}
        rightContent={<CheckCircleOutline />}

Disabled

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

Label

Helper text

Label

Helper text

Source Code

import { Input } from '@ocean-network-express/magenta-ui/react';

export function InputDisabled() {
  return (
    <div className="gap-y-4 flex flex-col">
      <div className="flex gap-x-4">
        <Input disabled />
        <Input type="password" placeholder="Password disabled" disabled />
        <Input type="number" placeholder="Number disabled" disabled />
      </div>
      <div className="flex gap-x-4 w-full">
        <div className="flex flex-grow items-start">

Readonly can be enabled by setting readOnly prop to true.

Source Code

import { Input } from '@ocean-network-express/magenta-ui/react';

export function InputReadonly() {
  return (
    <div className="flex gap-x-4">
      <Input readOnly />
      <Input type="password" placeholder="Password readonly " readOnly />
      <Input type="number" placeholder="Number readonly " readOnly />
    </div>
  );
}

Loading

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

Label

Helper text

Label

Helper text

Source Code

import { Input } from '@ocean-network-express/magenta-ui/react';

export function InputLoading() {
  return (
    <div className="gap-y-4 flex flex-col">
      <div className="flex gap-x-4">
        <Input loading />
        <Input type="password" placeholder="Password loading" loading />
        <Input type="number" placeholder="Number loading" loading />
      </div>
      <div className="flex gap-x-4 w-full">
        <div className="flex grow items-start">

Full width

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

Source Code

import { Input } from '@ocean-network-express/magenta-ui/react';

export function InputFullWidth() {
  return (
    <div className="flex flex-col gap-y-4">
      <Input fullWidth />
      <Input type="password" placeholder="Password" fullWidth />
      <Input type="number" placeholder="Number" fullWidth />
    </div>
  );
}

Label

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

Label

Helper text

Label

Helper text

Source Code

import { Input } from '@ocean-network-express/magenta-ui/react';

export function InputFormItems() {
  return (
    <div className="flex gap-x-4 w-full">
      <div className="flex grow items-start">
        <Input id="labelForm" placeholder="With labelText" label={<span>Label</span>} />
      </div>
      <div className="flex grow items-end">
        <Input placeholder="With helperText" helperText={<span>Helper text</span>} />
      </div>
      <div className="flex grow items-center">

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.

Left icon label

Source Code

import { InfoCircleOutline } from '@ocean-network-express/magenta-ui/icons';
import {
  Input,
  Tooltip,
  TooltipContent,
  TooltipTrigger,
} from '@ocean-network-express/magenta-ui/react';

export function InputLabelWithTooltip() {
  return (
    <div className="flex gap-x-4">
      <Input

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

Top Align

Left Align

Label

Source Code

import { Input } from '@ocean-network-express/magenta-ui/react';

export function InputLabelAlignment() {
  return (
    <div className="flex flex-col gap-y-24" style={{ width: 500 }}>
      <Input placeholder="Label on top" label={<span>Top Align</span>} fullWidth />

      <Input
        placeholder="Label on left"
        label={<span>Left Align</span>}
        labelAlignment="left"
        fullWidth

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)

Default HelperText

Helper Text

Source Code

import { Input } from '@ocean-network-express/magenta-ui/react';

export function InputHelperTextDefault() {
  return <Input placeholder="Placeholder" label="Default HelperText" helperText="Helper Text" />;
}

Tooltip HelperText

Source Code

import { Input } from '@ocean-network-express/magenta-ui/react';

export function InputHelperTextTooltip() {
  return (
    <Input
      placeholder="Placeholder"
      label="Tooltip HelperText"
      helperText="Helper Text"
      renderHelperType={'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 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)

Label

Error message goes here

Label

Warning message goes here

Label

Success message goes here

Source Code

import { Input } from '@ocean-network-express/magenta-ui/react';

export function InputStates() {
  return (
    <div className="flex gap-x-4 w-full">
      <Input
        placeholder="With both"
        state="error"
        label={<span>Label</span>}
        helperText={<span>Error message goes here</span>}
      />

Label

Source Code

import { Input } from '@ocean-network-express/magenta-ui/react';

export function InputStatesTooltip() {
  return (
    <div className="flex gap-x-4 w-full">
      <Input
        renderHelperType={'tooltip'}
        placeholder="With both"
        state="error"
        label={<span>Label</span>}
        helperText={<span>Error message goes here</span>}
      />

Was this page helpful?