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`		name of the form element and used for data-qa-input
`ariaLabel`	`string`		Label used to describe the input if not used with an accompanying 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"`	Sets the 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`	Sets the HTML disabled attribute
`isInvalid`	`boolean`		Renders an error state when true
`hasWarning`	`boolean`		Renders an warning state when true
`required`	`boolean`		Sets the HTML required attribute
`elemBefore`	`ReactNode`		16x16 element, such as an icon
`elemAfter`	`ReactNode`		16x16 element, such as an icon
`maxLength`	`number`		Max length of the input
`inputProps`	`any`		props to spread onto the input field
`innerRef`	`"input"`		Pass React.createRef() to get a reference to the underlying input element
`onBlur`	`signature`		Event Handlers
`onChange`	`signature`
`onFocus`	`signature`
`onKeyDown`	`signature`
`onKeyUp`	`signature`
`onPaste`	`signature`
`size`	`"large""small""default"`	`"default"`
`qa`	`Object`		Customizable QA Object - for backwards compatibility

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>
  )
}