Input - Docs

import { Input } from "@eggspot/ui"

Intents

<Input intent={Input.intents.base} placeholder="Type anything" />
<Input intent={Input.intents.primary} placeholder="Type anything" />
<Input intent={Input.intents.success} placeholder="Type anything" />
<Input intent={Input.intents.warning} placeholder="Type anything" />
<Input intent={Input.intents.danger} placeholder="Type anything" />

Size

<Input intent={Input.intents.danger} placeholder="Type anything" />
<Input intent={Input.intents.warning} placeholder="Type anything" />
<Input
  intent={Input.intents.primary}
  large
  placeholder="Type anything"
/>
<Input
  intent={Input.intents.success}
  large
  placeholder="Type anything"
/>

Icon

<Input
  intent={Input.intents.primary}
  placeholder="Type anything"
  leftIcon={SvgAppsIcon}
/>
<Input
  intent={Input.intents.success}
  placeholder="Type anything"
  leftIcon={SvgAppsIcon}
  rightIcon={SvgArrowRightIcon}
/>

Props

Attribute	Type	Description	Default
intent	Intents	Change input color	`base`
large	`boolean`	Change checkbox size	`false`
leftElement	`React.ReactNode`	Left elements appear within the Input	-
rightElement	`React.ReactNode`	Right elements appear within the Input	-
leftIcon	`React.FC<SvgIconProps>`	Leftmost Icon of the Input	-
rightIcon	`React.FC<SvgIconProps>`	Rightmost Icon of the Input	-
cls	`string`	Class of input	-
containerCls	`string`	Class of container input	-
...	`id, disabled, ...`	htmlProps	-

Types

Intents type

type Intents = 'base' | 'primary' | 'success' | 'warning' | 'danger';