TextInput

Offers a single-line input field for users to enter text or data.

@arctic-kit/snow

View source code

View storybook

Usage

Name

Label

Placeholder

Size

Disabled

Read Only

import { useState } from 'react';
import { TextInput } from '@arctic-kit/snow';

function Demo() {
  const [value, setValue] = useState('');

  return (
    <TextInput
      label="Name" placeholder="Enter your name here" size="medium"
      value={value}
      onChange={(event) => setValue(event.target.value)}
    />
  );
}

API Reference

Props	Type	Default
`className`	`string \| undefined`	---
`containerClassName`	`string \| undefined`	---
`containerStyle`	`CSSProperties \| undefined`	---
`disabled`	`boolean \| undefined`	---
`errorText`	`string \| undefined`	---
`label`	`string \| undefined`	---
`maxLength`	`number \| undefined`	---
`onBlur`	`(((event: ChangeEvent<HTMLInputElement> \| ChangeEvent<HTMLTextAreaElement>) => void) & ((event: ChangeEvent<HTMLInputElement>) => void)) \| undefined`	---
`onChange`	`((event: ChangeEvent<HTMLInputElement>) => void) \| undefined`	---
`placeholder`	`string \| undefined`	---
`prefix`	`ReactNode`	---
`prefixProps`	`HTMLAttributes<"div"> \| undefined`	---
`readOnly`	`boolean \| undefined`	`false`
`required`	`boolean \| undefined`	---
`size`	`"small" \| "medium" \| "large"`	`medium`
`style`	`CSSProperties \| undefined`	---
`suffix`	`ReactNode`	---
`suffixProps`	`HTMLAttributes<"div"> \| undefined`	---
`type`	`HTMLInputTypeAttribute \| undefined`	`text`
`value`	`string \| undefined`	---

Text Area Toggle Group