hightouch

UI

Getting started

InstallUsageGuidelinesContributeRelease

Foundation

Colors

Layout

BoxColumnRow

Typography

CodeHeadingParagraphSection HeadingText

Navigation

LinkLink Button

Feedback

AlertBadgeDestination BadgeDestination Badge GroupEmpty StateLabel BadgeLabel Badge GroupPillProgress BarSkeletonSpinnerStatsStatus BadgeStatus IndicatorTagToast

Overlay

Confirmation DialogDrawerFilter MenuMenuTooltip

Forms

ButtonButton GroupCheckboxCheckbox GroupClipboard ButtonComboboxEditable DescriptionEditable HeadingFile InputForm FieldIcon ButtonMulti SelectNumber InputRadioSearch InputSelectSliderSlug InputSwitchTag InputTextareaText Input

Other

AvatarCode SnippetTabs

Upsells

Upsell BadgeUpsell ButtonUpsell CardUpsell DialogUpsell HeadingUpsell Success Dialog

Text Input

Text input allows user to enter text.

#

import { TextInput } from "@hightouchio/ui";

function Example() {
const [value, setValue] = React.useState("");

return (
<TextInput
value={value}
placeholder="Enter a value..."
onChange={(event) => setValue(event.target.value)}
/>
);
}

#

#

Input should be disabled, when input shouldn't be allowed to be interacted with.

<TextInput isDisabled value="This is not editable" />

#

Compared to a disabled input, read only input is usually used for values that user might want to copy to clipboard.

<TextInput isReadOnly value="This is focusable, but not editable" />

#

Invalid input indicates that value isn't what the system expects.

function Example() {
const [value, setValue] = React.useState("Incorrect");

return (
<TextInput
isInvalid
value={value}
onChange={(event) => setValue(event.target.value)}
/>
);
}

#

TextInput accepts a type prop, which accepts the same values as type attribute of an input tag.

function Example() {
const [value, setValue] = React.useState("Secret");

return (
<TextInput
type="password"
value={value}
onChange={(event) => setValue(event.target.value)}
/>
);
}

#

#

  • Use sentence case for placeholder text.
  • End placeholder text with three dots.

#

Inherits margin props.

NameDefaultDescription
isDisabled

—

boolean

Determines whether input is disabled and doesn't respond to any user interactions.

isReadOnly

—

boolean

Determines whether input can be interacted with, but value can't be changed.

isInvalid

—

boolean

Indicates that input value is invalid.

isRequired

—

boolean

Indicates that input is required to fill out.

type

—

"text" | "password" | "email" | "date" | "datetime-local" | "number" | "tel" | "time" | "url" | "week"

Input type.

value

—

string

Input value.

width"xs""xs" | "sm" | "md" | "lg" | "auto" | "100%"

Input width.

On this page