Input

e => setValue(e.target.value)

e => console.log(e.target.value)

import * as React from "react";
import { Input } from "spaceweb/input";

export default () => {
  const [value, setValue] = React.useState("Hello");
  return (
    <Input
      value={value}
      onChange={e => setValue(e.target.value)}
      debouncedOnChange={e => console.log(e.target.value)}
      debounceInterval={200}
      style="w-3/4"
      intent="default"
      variant="default"
      placeholder="Controlled Input"
    />
  );
}

An input enables a person to type in text information.

When to use

• When a person should provide information to the application.

Examples

You can pass accept prop to native input using Override which isn't exposed in the main API.

As with many of our components, there is also an uncontrolled version, StatefulInput, which manages its own state.

API

Input props

You can check the implementation of the component for more details.

Input exports

You can import this module like so:

import {ADJOINED} from 'spaceweb/input'

It exports the following components or utility functions:

• ADJOINED
• CUSTOM_INPUT_TYPE
• ENHANCER_POSITION
• Input
• InputContainer
• MaskedInput
• STATE_CHANGE_TYPE
• StatefulContainer
• StatefulInput
• StyledEndEnhancer
• StyledInput
• StyledInputContainer
• StyledInputEnhancer
• StyledRoot
• StyledStartEnhancer