Inputs View Source



The Input component is used to get a users input in a text field or a textbox.



Imports



Import React and the Input and/or the Textarea Components.


0
import * as React from "react";
1
import { Input, Textarea } from "slate-react-system";


Textarea



Declare the Textarea component.


0
class ExampleTextarea extends React.Component {
1
  state = { exampleOne: "Example text" };
2
3
  _handleChange = (e) => this.setState({ [e.target.name]: e.target.value });
4
5
  render() {
6
    return (
7
      <Textarea
8
        name="exampleOne"
9
        value={this.state.exampleOne}
10
        onChange={this._handleChange}
11
      />
12
    );
13
  }
14
}



Input with label and description



Declare the Input component with a label and description value.

Location of your pastries
We need to know the location of your pastries.

0
class ExampleLabel extends React.Component {
1
  state = { exampleTwo: null };
2
3
  _handleChange = (e) => this.setState({ [e.target.name]: e.target.value });
4
5
  render() {
6
    return (
7
      <Input
8
        label="Location of your pastries"
9
        description="We need to know the location of your pastries."
10
        tooltip="Hey friends."
11
        name="exampleTwo"
12
        value={this.state.exampleTwo}
13
        placeholder="Pastry Location"
14
        onChange={this._handleChange}
15
      />
16
    );
17
  }
18
}



Input with max length



Declare the Input component with the maximum number of characters allowed.

Max length is 14

0
class ExampleMax extends React.Component {
1
  state = { exampleThree: null };
2
3
  _handleChange = (e) => this.setState({ [e.target.name]: e.target.value });
4
5
  render() {
6
    return (
7
      <Input
8
        label="Max length is 14"
9
        max={14}
10
        name="exampleThree"
11
        value={this.state.exampleThree}
12
        onChange={this._handleChange}
13
      />
14
    );
15
  }
16
}



Input with copy and paste



Declare the Input component with copyable.

Copy and paste (read only)

0
class ExampleCopyPaste extends React.Component {
1
  state = { exampleFour: "aaaaa-bbbbb-ccccc-ddddd-eeee" };
2
3
  _handleChange = (e) => this.setState({ [e.target.name]: e.target.value });
4
5
  render() {
6
    return (
7
      <Input
8
        label="Copy and paste (read only)"
9
        readOnly
10
        name="exampleFour"
11
        copyable
12
        value={this.state.exampleFour}
13
        onChange={this._handleChange}
14
      />
15
    );
16
  }
17
}



Input with icon and onSubmit



Declare the Input component with an icon and an onSubmit function. onSubmit will be triggered upon click of the icon and upon key down of the enter key.

Icon and submit function

0
class ExampleCopyPaste extends React.Component {
1
  state = { exampleFive: "Click the 'x'" };
2
3
  _handleChange = (e) => this.setState({ [e.target.name]: e.target.value });
4
5
  render() {
6
    return (
7
      <Input
8
        label="Icon with submit function"
9
        name="exampleFive"
10
        icon={SVG.Dismiss}
11
        onSubmit={() => {
12
          this.setState({ exampleFive: "" });
13
        }}
14
        value={this.state.exampleFive}
15
        onChange={this._handleChange}
16
      />
17
    );
18
  }
19
}



Input with validation



Declare the Input component with validation.

Success


Warning


Error

0
class ExampleSuccess extends React.Component {
1
  render() {
2
    return (
3
      <Input
4
        label="Success"
5
        placeholder="This is an uncontrolled input for success."
6
        validation="SUCCESS"
7
      />
8
    );
9
  }
10
}
11
12
class ExampleWarning extends React.Component {
13
  render() {
14
    return (
15
      <Input
16
        label="Warning"
17
        placeholder="This is an uncontrolled input for warning."
18
        validation="WARNING"
19
      />
20
    );
21
  }
22
}
23
24
class ExampleError extends React.Component {
25
  render() {
26
    return (
27
      <Input
28
        label="Error"
29
        placeholder="This is an uncontrolled input for error."
30
        validation="ERROR"
31
      />
32
    );
33
  }
34
}



Accepted React Properties



Inputs
NameTypeDefaultDescription
onChange
function
null
Function called upon an onChange event.
value
string
null
The value that the dropdown takes. Can be used to assign default values as well.
name
string
null
Input name.
label
string
null
Label text.
description
string
null
Description text.
tooltip
string
null
Tooltip text.
full
boolean
false
Sets width to 100% if true
max
int
null
Max number of input characters.
validation
string
null
Validation style. Use: SUCCESS, WARNING or ERROR.
copyable
boolean
false
Adds a copy icon to the input and upon click, copies the input value to the clipboard.
icon
SVG
null
Icon on the right side of the input box. If an onSubmit is specified, it will trigger on click. Specifying an icon overrides copyable.
unit
string
null
Adds a string to the right side of the input box to indicate a unit of measurement.
onSubmit
function
null
Function called when the enter key is pressed and when the icon (if present) is clicked.
containerStyle
object
null
Style object applied to the container that holds the label, description, and input box.
style
object
null
Style object applied to the input box.
ExperiencesCreateFilecoinAddressCreateFilecoinStorageDealCreateTokenFilecoinBalancesListFilecoinDealsListFilecoinSettingsFriendsListPeersListSendAddressFilecoin

Components
Avatar GroupButtonsCard TabsCarouselCheckboxesColorsDatepickerDropdownsGlobeHover TileIconsInputsLine ChartList EditorLoadersModalsNotificationsRadiosSlidersStatsTablesTabsTogglesTooltipsTypography
View source