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.

You can also refer to our form patterns for guidance on layout, proper usage and accessibility of various form elements.

import { Input } from '@sproutsocial/racine'

() => {
  return (
    <FormField
      label='First Name'
    >
      {props => <Input {...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
        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.ReactNode`		16x16 element, such as an icon
`elemAfter`	`React.ReactNode`		16x16 element, such as an icon
`maxLength`	`number`		Max length of the input
`inputProps`	`"input"`		Props to spread onto the underlying input element
`innerRef`	`{ current: null \| HTMLInputElement; }`		Used to get a reference to the underlying element
`onBlur`	`(e: React.FocusEvent<HTMLInputElement>) => void`
`onChange`	`(e: React.SyntheticEvent<HTMLInputElement>, value: string) => void`
`onClear`	`(e: React.SyntheticEvent<HTMLButtonElement>) => void`
`onFocus`	`(e: React.FocusEvent<HTMLInputElement>) => void`
`onKeyDown`	`(e: React.KeyboardEvent<HTMLInputElement>, value: string) => void`
`onKeyUp`	`(e: React.KeyboardEvent<HTMLInputElement>, value: string) => void`
`onPaste`	`(e: React.SyntheticEvent<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
        value={value}
        onChange={e => setValue(e.target.value)}
        id="name"
        name="name"
        elemAfter={<Input.ClearButton />}
        clearButtonLabel="Clear"
      />
    </Box>
  )
}

Recipes

Input with character counter

Note the usage of component nested inside , this is done to convey to screen-reader users there is a character limit associated with the input.

import { Input } from '@sproutsocial/racine'

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

  return (
    <Box>
      <Label htmlFor='name' mb={300}>
        First name <VisuallyHidden>(50 characters)</VisuallyHidden>
      </Label>

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

Secondary Input Style

For better accessibility, placeholder text is required when using the secondary input style.

import { Input } from '@sproutsocial/racine'

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

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