Input

Components

Input

Input is a themed version of the native form field that enables a user to interact and input data.

Always use a Label component to identify and describe the purpose of an input element.

First name

import { Input } from '@sproutsocial/racine'

() => {
  const [value, setValue] = useState("")

  return (
    <Box>
      <Label htmlFor='name'>
        First name
      </Label>

      <Input
        placeholder="Please enter your name"
        value={value}
        onChange={e => setValue(e.target.value)}
        id='name'
        name='name'
      />
    </Box>
  )
}

() => {
  const [value, setValue] = useState("")
  return (
    <Box>
      <Label htmlFor='name'>
        First name
      </Label>
      <Input
        placeholder="Please enter your name"
        value={value}
        onChange={e => setValue(e.target.value)}
        id='name'
        name='name'
      />
    </Box>
  )
}

Properties

System props

System props apply standard sets of properties to a component that can be used to alter its appearance on the fly.

COMMON

Learn more

Name	Type	Default	Description
`id`	`string`		ID of the form element, should match the "for" value of the associated label
`name`	`string`
`ariaLabel`	`string`		Label used to describe the input if not used with an accompanying visual label
`placeholder`	`string`		Placeholder text for when value is undefined or empty
`value`	`string`		Current value of the input
`type`	`"date""email""number""password""text""url""search"`	`"text"`	HTML type attribute
`autoComplete`	`boolean`		Set option to display earlier typed values
`autoFocus`	`boolean`	`false`	Will autofocus the element when mounted to the DOM
`disabled`	`boolean`	`false`	HTML disabled attribute
`isInvalid`	`boolean`		Whether or not the current contents of the input are invalid
`hasWarning`	`boolean`		Whether or not the current contents of the input has any warnings
`required`	`boolean`		HTML required attribute
`elemBefore`	`React.Node`		16x16 element, such as an icon
`elemAfter`	`React.Node`		16x16 element, such as an icon
`maxLength`	`number`		Max length of the input
`inputProps`	`any`		Props to spread onto the underlying input element
`innerRef`	`"input"`		Used to get a reference to the underlying element
`onBlur`	`(e: SyntheticFocusEvent<HTMLInputElement>) => void`
`onChange`	`(e: SyntheticInputEvent<HTMLInputElement>, value: string) => void`
`onFocus`	`(e: SyntheticFocusEvent<HTMLInputElement>) => void`
`onKeyDown`	`( e: SyntheticKeyboardEvent<HTMLInputElement>, value: string ) => void`
`onKeyUp`	`( e: SyntheticKeyboardEvent<HTMLInputElement>, value: string ) => void`
`onPaste`	`(e: SyntheticInputEvent<HTMLInputElement>, value: string) => void`
`size`	`"large""small""default"`	`"default"`
`qa`	`Object`

Recipes

Input with character counter

First name

import { Input } from '@sproutsocial/racine'

() => {
  const [value, setValue] = useState("")

  return (
    <Box>
      <Label htmlFor='name'>
        First name
      </Label>

      <Input
        placeholder="Please enter your name"
        value={value}
        onChange={e => setValue(e.target.value)}
        id='name'
        name='name'
        elemAfter={
          <CharacterCounter currentValue={value.length} maxValue={50} />
        }
      />
    </Box>
  )
}

() => {
  const [value, setValue] = useState("")
  return (
    <Box>
      <Label htmlFor='name'>
        First name
      </Label>
      <Input
        placeholder="Please enter your name"
        value={value}
        onChange={e => setValue(e.target.value)}
        id='name'
        name='name'
        elemAfter={
          <CharacterCounter currentValue={value.length} maxValue={50} />
        }
      />
    </Box>
  )
}