Input

Renders a custom input component.

Usage

import { Input } from '@binarycapsule/ui-capsules';

Demo

View source on GitHub

Knobs 🎛

none
medium
none
none
solid
<Input
  helpText=""
  label="Label"
  onChange={function}
  placeholder="Placeholder"
  value="Hello world"
/>

Props

NameDescription
size
"small" | "medium" | "large"(Default: "medium")
Changes the size of the input.
value
string(Default: undefined)
The text of the input.
onChange
function(Default: undefined)
The onChange handler.
disabled
boolean(Default: false)
If set to true, the input will be disabled.
leftIcon
string(Default: undefined)
Pass an icon string to render the respective icon before the input's text.
rightIcon
string(Default: undefined)
Pass an icon string to render the respective icon after the input's text.
variant
"success" | "error"(Default: undefined)
The input variant.
label
string(Default: undefined)
The input label.
helpText
string(Default: undefined)
Help text rendered below the input
iconVariant
"solid" | "outline"(Default: "solid")
The type of icon to render (solid or outline).