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 to identify and describe the purpose of an input element. If there is not enough space for a text label you can use an aria-label instead.

If you are using an input for a form, check out the component. It handles errors, labels, and formatting for you.

Also, you can refer to our form patterns for tips on how to build accessible forms.

First Name

import { Input } from '@sproutsocial/racine'

() => {
  return (
    <FormField 
      label='First Name'
    >
      {props => <Input placeholder='Placeholder text...' {...props} />}
    </FormField>
  )
}

() => {
  return (
    <FormField 
      label='First Name'
    >
      {props => <Input placeholder='Placeholder text...' {...props} />}
    </FormField>
  )
}

If your implementation requires more granular control over the component and styles you can use a and

First name

import { Input } from '@sproutsocial/racine'

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

  return (
    <Box>
      <Label htmlFor='name' mb={300}>
        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' mb={300}>
        First name
      </Label>
      <Input
        placeholder="Please enter your name"
        value={value}
        onChange={e => setValue(e.target.value)}
        id='name'
        name='name'
      />
    </Box>
  )
}

Properties

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
`ariaDescribedby`	`string`		Attribute used to associate other elements that describe the Input, like an error
`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
`readOnly`	`boolean`		HTML readonly 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`
`appearance`	`"primary"` `"secondary"`	`"primary"`	Controls the styles of the input. Primary is our standard input styles and secondary is a borderless input. Note that this prop should only be used to alter styles and not functionality.

Recipes

Input with character counter

First name

import { Input } from '@sproutsocial/racine'

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

  return (
    <Box>
      <Label htmlFor='name' mb={300}>
        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' mb={300}>
        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>
  )
}

Secondary Input Style

import { Input } from '@sproutsocial/racine'

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

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

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