Input

Installing

Install the component

npm install @supabase/ui

Getting started

Import the component

@import { Input } from '@supabase/ui'

Basic

An Input component will default to using type="text". You can define a label.

type can be used to show what kind of input you need. It supports all Input types, except for the following:

Loading

Input labels

You can use label, descriptionText and labelOptional to illustrate what your Input is for and demonstrate to the user what they need to input.

Loading

Icon

use Icon to inject any Icon component you like.

Loading

Copy value

Use copy to add a copy button. It will copy the value of value

Loading

Reveal and copy

Use copy to add a copy button. It will copy the value of value

Loading

Actions

Use actions to inject any React.ReactNode jsx

Loading

Error

Use error with a string to show an error message

Loading

Text Area

Use <Input.TextArea> to use a text area input

Loading

Text Area with limit

Use <Input.TextArea> to use a text area input

Loading

API Reference

Input

PropertyType
actionsReact.ReactNode
autoCompletestring
autofocusboolean
classNamestring
copyboolean
defaultValueTBC
descriptionTextstring
disabledboolean
errorstring
iconany
idstring
inputRefstring
labelstring
labelOptionalstring
layoutTBC
namestring
placeholderstring
revealboolean
sizeTBC
styleCSSProperties
typeTBC
valueany
onBlurTBC
onChangeTBC
onFocusTBC
onKeyDownTBC

Input.TextArea

Coming soon