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.

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

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
`clearButtonLabel`	`string`		Label for Input.ClearButton. Required when using Input.ClearButton.
`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`	`{\| current: null \| HTMLInputElement \|}` `(React.ElementRef<any> \| HTMLElement) => void`		Used to get a reference to the underlying element
`onBlur`	`(e: SyntheticFocusEvent<HTMLInputElement>) => void`
`onChange`	`(e: SyntheticInputEvent<HTMLInputElement>, value: string) => void`
`onClear`	`(e: SyntheticEvent<HTMLButtonElement>) => 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.

Subcomponents

Clear Button

Input.ClearButton is an optional subcomponent that renders a button that clears the Input. A Clear Button is included automatically for any with "search" and can be added to an input of another type by passing <Input.ClearButton/> as the prop. In either case, a localized prop must be passed to .

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={<Input.ClearButton />}
        clearButtonLabel="Clear"
      />
    </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={<Input.ClearButton />}
        clearButtonLabel="Clear"
      />
    </Box>
  )
}

Recipes

Input with character counter

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