TextField

<TextField /> is a component that user can enter and edit letters, numbers, and symbols.

// import { TextField } from '@vibrant-ui/components' <TextField />

// import { TextField } from '@vibrant-ui/components'
<TextField />

Loading...

How to use

import { TextField } from '@vibrant-ui/components';

Properties

Prop	Type	Default	Description
label	string | undefined	undefined	Display label
placeHolder	string | undefined	undefined	Informative text before user enter something
type	text | email | url | number	text	Set input type of TextField. Related keyboard is provided in dynamic keypad ( For password type, read PasswordField component )
clearable	boolean	false	Set activation status of the clear button. Clear button only appears when TextField has value
prefix	string | undefined	undefined	Set prefix text
suffix	string | undefined	undefined	Set suffix text
renderStart	() => ReactElementChild | undefined	undefined	Set element in the left of the TextField
renderEnd	() => ReactElementChild | undefined	undefined	Set element in the right of the TextField
autoCapitalize	none | character | sentences | words	none	Set how the first letter of the input is automatically capitalized
autoComplete	none email password newPassword username name familyName givenName middleName namePrefix nameSuffix ccNumber ccExp ccExpMonth ccExpYear ccCsc postalCode addressCountry addressRegion addressCity addressStreet addressExtended otp tel birthDayDay birthDayMonth birthDayYear birthDayFull	none	Set input form to enable the user's agent (broswer, platform) to complete automatically
readOnly	boolean	false	Set availability of editing

Example Usage

// import { TextField } from '@vibrant-ui/components' <VStack spacing={20}> <TextField id="default" /> <TextField id="label" label="Label with Placeholder" placeholder="Placeholder" /> <TextField id="placeholder" placeholder="Placeholder" /> <TextField id="error-state" state="error" /> <TextField id="helper-text" helperText="TextField with helper text" /> <TextField id="clearable" clearable={true} placeholder="Enter something to see clear button" /> <TextField id="prefix-suffix" prefix="prefix" suffix="suffix" placeholder="Focus on here to see prefix and suffix" /> <TextField id="render-addons" renderEnd={() => ( <Icon.Star.Thin size={20} fill="onView2" /> )} renderStart={() => ( <Icon.Add.Thin size={20} fill="onView2" /> )} /> </VStack>

// import { TextField } from '@vibrant-ui/components'

<VStack spacing={20}>
  <TextField id="default" />
  <TextField
    id="label"
    label="Label with Placeholder"
    placeholder="Placeholder"
  />
  <TextField id="placeholder" placeholder="Placeholder" />
  <TextField id="error-state" state="error" />
  <TextField
    id="helper-text"
    helperText="TextField with helper text"
  />
  <TextField
    id="clearable"
    clearable={true}
    placeholder="Enter something to see clear button"
  />
  <TextField
    id="prefix-suffix"
    prefix="prefix"
    suffix="suffix"
    placeholder="Focus on here to see prefix and suffix"
  />
  <TextField
    id="render-addons"
    renderEnd={() => (
      <Icon.Star.Thin size={20} fill="onView2" />
    )}
    renderStart={() => (
      <Icon.Add.Thin size={20} fill="onView2" />
    )}
  />
</VStack>

Loading...