TextInput

import { TextInput } from '@tulsa/core';

<TextInput placeholder='Enter Text' />

Props

Name	Type	Description	Default
leadingVisual	string | React.ReactElement	An element that will appear on the left side of the input
leadingVisualProps	HTMLProps<"span">	Props that will be applied to the root component of the leading visual
trailingVisual	string | React.ReactElement	An element that will appear on the right side of the input
trailingVisualProps	HTMLProps<"span">	Props that will be applied to the root component of the trailing visual
leadingAddon	React.ReactElement	An element that will appear before the input's content
trailingAddon	React.ReactElement	An element that will appear after the button's content
rootProps	HTMLProps<"span">	Props that are applied to the root of the input
loading	boolean	Controls whether a spinner is displayed
as	T	Controls the root element that is used by the input. Can be an HTML element string or a React component

Native props are forwarded to the root component.

Examples

Visuals

$per mi.$

<TextInput placeholder='Enter Text' leadingVisual={"$"} trailingVisual="per mi." />
<TextInput placeholder='Enter Text' leadingVisual={"$"} />

Addons

per mi.

<TextInput placeholder='Search' leadingAddon={<BiSearch className='text-gray-400' />} trailingVisual="per mi." />
<TextInput placeholder='Search' leadingAddon={<BiSearch className='text-gray-400' />} trailingAddon={<BiChevronDown size={18} className='text-gray-400' />} />

Loading

per mi.

<TextInput placeholder='Search' leadingAddon={<BiSearch className='text-gray-400' />} trailingVisual="per mi." loading />