FormField

<DemoLayout>
  {/* Use the "input" prop for a streamlined approach. */}
  <FormField input={TextInput} label="Name" />

  {/* Or use "children", if you prefer. */}
  <FormField label="Description">
    <TextArea />
  </FormField>
</DemoLayout>

<DemoLayout>
  <FormField
    input={TextInput}
    label="Name"
    required />
  <FormField
    input={TextInput}
    label="Nombre"
    required
    requiredText="Necesario" />
</DemoLayout>

<FormField
  input={TextInput}
  label="Name"
  secondaryText="Optional" />

<FormField
  input={TextInput}
  label="Name"
  caption="This is help text" />

<DemoLayout>
  <FormField
    input={TextInput}
    label="Success"
    caption="This is help text"
    variant="success" />
  <FormField
    input={TextInput}
    label="Warning"
    caption="This is help text"
    variant="warning" />
  <FormField
    input={TextInput}
    label="Danger"
    caption="This is help text"
    variant="danger" />
</DemoLayout>

<DemoLayout>
  <FormField
    input={TextInput}
    label="Address"
    placeholder="1234 Main St" />
  <FormField
    input={TextInput}
    label="Address Line 2"
    placeholder="Apt 101"
    hideLabel />
</DemoLayout>

() => {
  class MyForm extends Component {
    constructor(props) {
      super(props);

      this.state = {
        caption: undefined,
        valid: false,
        validated: false,
        value: '',
        variant: undefined
      };

      this.handleTextInputChange = this.handleTextInputChange.bind(this);
      this.validate = this.validate.bind(this);
    }

    handleTextInputChange(event) {
      this.setState({
        value: event.target.value
      });
    }

    validate(event) {
      if (this.state.value) {
        this.setState({
          caption: 'Success, the value is valid.',
          valid: true,
          validated: true,
          variant: 'success'
        });
      } else {
        this.setState({
          caption: 'Oops, the value is invalid.',
          valid: false,
          validated: true,
          variant: 'danger'
        });
      }

      this.input.focus();
    }

    render() {
      const { caption, valid, validated, variant, value } = this.state;
      const formFieldProps = {
        input: TextInput,
        inputRef: ref => { this.input = ref; },
        invalid: validated ? !valid : undefined,
        label: 'Example',
        onChange: this.handleTextInputChange,
        caption,
        required: true,
        value,
        variant
      };

      return (
        <DemoLayout>
          <FormField {...formFieldProps} />
          <Button onClick={this.validate}>Validate</Button>
        </DemoLayout>
      );
    }
  }

  return <MyForm />;
}

<div dir="rtl">
  <ThemeProvider theme={{ direction: 'rtl' }}>
    <FormField
      input={TextInput}
      iconStart={<IconBackspace />}
      label="نموذج"
      defaultValue="مرحبا بالعالم"
      required
      requiredText="مطلوب" />
  </ThemeProvider>
</div>