Input

View Source

Composes Input.InputBox and Input.InputField.

const sizes = ['xs', 'sm', 'md', 'lg']
render(() => (
  <GridView width="100%" columns="repeat(4, 1fr)" alignment="start" spacing={2}>
    {sizes.map((size, index) => (
      <Input key={size} size={size} defaultValue={`Input ${size}`} placeholder={`Placeholder ${size}`} />
    ))}
  </GridView>
))

const sizes = ['xs', 'sm', 'md', 'lg']
render(() => (
  <GridView width="100%" columns="repeat(4, 1fr)" alignment="start" spacing={2}>
    {sizes.map((size, index) => (
      <Input key={size} size={size} defaultValue={`Input ${size}`} placeholder={`Placeholder ${size}`} />
    ))}
  </GridView>
))

const sizes = ['xs', 'sm', 'md', 'lg']
render(() => (
  <GridView width="100%" columns="repeat(4, 1fr)" alignment="start" spacing={2}>
    {sizes.map((size, index) => (
      <Input key={size} size={size} defaultValue={`Input ${size}`} placeholder={`Placeholder ${size}`} disabled />
    ))}
  </GridView>
))

const sizes = ['xs', 'sm', 'md', 'lg']
render(() => (
  <GridView width="100%" columns="repeat(4, 1fr)" alignment="start" spacing={2}>
    {sizes.map((size, index) => (
      <Input key={size} size={size} defaultValue={`Input ${size}`} placeholder={`Placeholder ${size}`} disabled />
    ))}
  </GridView>
))

const sizes = ['xs', 'sm', 'md', 'lg']
render(() => (
  <GridView width="100%" columns="repeat(4, 1fr)" alignment="start" spacing={2}>
    {sizes.map((size, index) => (
      <Input key={size} size={size} defaultValue={`Input ${size}`} placeholder={`Placeholder ${size}`} subdued />
    ))}
  </GridView>
))

const sizes = ['xs', 'sm', 'md', 'lg']
render(() => (
  <GridView width="100%" columns="repeat(4, 1fr)" alignment="start" spacing={2}>
    {sizes.map((size, index) => (
      <Input key={size} size={size} defaultValue={`Input ${size}`} placeholder={`Placeholder ${size}`} subdued />
    ))}
  </GridView>
))

const sizes = ['xs', 'sm', 'md', 'lg']
render(() => (
  <GridView width="100%" columns="repeat(4, 1fr)" alignment="start" spacing={2}>
    {sizes.map((size, index) => (
      <Input key={size} defaultValue={`Input ${size}`} placeholder={`Placeholder ${size}`} readOnly size={size} />
    ))}
  </GridView>
))

const sizes = ['xs', 'sm', 'md', 'lg']
render(() => (
  <GridView width="100%" columns="repeat(4, 1fr)" alignment="start" spacing={2}>
    {sizes.map((size, index) => (
      <Input key={size} defaultValue={`Input ${size}`} placeholder={`Placeholder ${size}`} readOnly size={size} />
    ))}
  </GridView>
))

Props

Accepts props for Input.InputBox and Input.InputField, remaining props are forwarded to Input.InputBox.

autoCompleteInputFieldProps['autoComplete']

Accepts “on” or “off” values. Learn more on MDN.

autoFocusInputFieldProps['autoFocus']

Input will receive focus on page load. (Limit to one per page.)

autoWidthInputFieldProps['autoWidth']

Sets the input’s width to the exact size of the text plus padding and cursor. Allows a string to be passed for measuring if input value is different from displayed value.

backgroundColorInputBoxProps['backgroundColor']

Changes background color of the input. Both theme colors and html values are supported.

colorInputBoxProps['color']

Changes color of the input’s value. Both theme colors and html values are supported.

defaultValueInputFieldProps['defaultValue']

Provides an initial value to the input.

disabledboolean

Disables the input.

focusInputFieldProps['focus']

Pass styles for when the input is focused.

highlightOnInteractionInputFieldProps['highlightOnInteraction']

Forces the input text to stay fully selected while interacting with it.

hoverInputFieldProps['hover']

Pass styles for when the input is hovered.

idInputFieldProps['id']

Used to identify an input.

maxInputFieldProps['max']

Defines the maximum value that is acceptable and valid for the input. Learn more on MDN.

maxLengthInputFieldProps['maxLength']

defines the maximum number of characters the input will accept. Learn more on MDN.

minInputFieldProps['min']

Defines the minimum value that is acceptable and valid for the input. Learn more on MDN.

minLengthInputFieldProps['minLength']

defines the maximum number of characters the input will accept. Learn more on MDN.

nameInputFieldProps['name']

Names the input and required to submit the input’s value.

onBlurInputFieldProps['onBlur']

Maps to the internal input’s onBlur prop.

onChangeInputFieldProps['onChange']

Maps to the internal input’s onChange prop.

onFocusInputFieldProps['onFocus']

Maps to the internal input’s onFocus prop.

onKeyDownInputFieldProps['onKeyDown']

onKeyUpInputFieldProps['onKeyUp']

placeholderInputFieldProps['placeholder']

placeholderColorInputFieldProps['placeholderColor']

Changes color of the input’s placeholder text. Both theme colors and html values are supported.

readOnlyInputFieldProps['readOnly']

Prevents the user from editing the input, but still submits and receives focus.

readOnlyBackgroundColorstring

Allows overriding the default background color when readonly is true.

requiredInputFieldProps['required']

Sets the input’s required attribute.

typeInputFieldProps['type']

Specifies the type of form control to render. Learn more on MDN

valueInputFieldProps['value']

User provided value that is passed to input.

Props

PreviousForm NextInput.Inline