Skip to content
Sancho UI
Toggle dark mode
Getting started
Built with ☕ by
Ben McMahen

Forms

To create forms, Sancho exports multiple components:

  • InputGroup: A useful helper for providing labels, helper text, and errors for the other input components. Composes the Label component.
  • Input: The standard input component for regular text input.
  • TextArea: A textarea version of the Input component.
  • Label: Label for input types.
  • Select: Select menu.
  • Check: Used for checkbox or radio style inputs.

You'll typically want to wrap you input elements with InputGroup to ensure proper accessibility, like in the examples below.

Input

This field is required
<div style={{ maxWidth: "350px" }}>
  <InputGroup label="Email address">
    <Input placeholder="ben.mcmahen@gmail.com" />
  </InputGroup>
  <InputGroup label="Email address">
    <Input disabled placeholder="ben.mcmahen@gmail.com" />
  </InputGroup>
  <InputGroup error="This field is required" label="Email address">
    <Input placeholder="ben.mcmahen@gmail.com" />
  </InputGroup>
</div>

TextArea

Please provide a brief description of yourself. This will go on your profile.
Please provide a brief description of yourself. This will go on your profile.
This field is required
Please provide a brief description of yourself. This will go on your profile.
<div style={{ maxWidth: "350px" }}>
  <InputGroup
    label="Example textarea"
    helpText="Please provide a brief description of yourself. This will go on your profile."
  >
    <TextArea placeholder="Something about me" />
  </InputGroup>
  <InputGroup
    label="Example textarea"
    helpText="Please provide a brief description of yourself. This will go on your profile."
  >
    <TextArea disabled placeholder="Something about me" />
  </InputGroup>
  <InputGroup
    error="This field is required"
    label="Example textarea"
    helpText="Please provide a brief description of yourself. This will go on your profile."
  >
    <TextArea placeholder="Something about me" />
  </InputGroup>
</div>

Select

This field is required
<div style={{ maxWidth: "350px" }}>
  <InputGroup label="Gender">
    <Select>
      <option>Male</option>
      <option>Female</option>
      <option>Other</option>
    </Select>
  </InputGroup>
  <InputGroup label="Gender">
    <Select disabled>
      <option>Male</option>
      <option>Female</option>
      <option>Other</option>
    </Select>
  </InputGroup>
  <InputGroup error="This field is required" label="Gender">
    <Select>
      <option>Male</option>
      <option>Female</option>
      <option>Other</option>
    </Select>
  </InputGroup>
</div>

Check

You must select a gender
<div style={{ maxWidth: "350px" }}>
  <InputGroup label="Gender">
    <div>
      <Check disabled label="Male" checked />
      <Check label="Female" />
      <Check label="Other" />
    </div>
  </InputGroup>

  <InputGroup error="You must select a gender" label="Gender">
    <div>
      <Check disabled label="Male" checked />
      <Check label="Female" />
      <Check label="Other" />
    </div>
  </InputGroup>
</div>

Combined example

Please provide a brief description of yourself. This information will be available to the public.
<form className="Form-basics">
  <InputGroup label="Email address *">
    <Input type="email" required placeholder="name@example.com" />
  </InputGroup>
  <InputGroup
    label="About yourself"
    helpText="Please provide a brief description of yourself. This information will be available to the public."
  >
    <TextArea placeholder="I love dogs and peanut butter" />
  </InputGroup>
  <InputGroup label="Gender">
    <Select>
      <option>Female</option>
      <option>Male</option>
      <option>Other</option>
    </Select>
  </InputGroup>
  <InputGroup label="Do you accept our terms?">
    <Check label="Sure, whatevs" />
  </InputGroup>
</form>

Different sizes

Input elements support three different sizes: lg, md and sm.

Please provide a brief description of yourself. This information will be available to the public.
<form className="Form-basics">
  <InputGroup label="Email address">
    <Input inputSize="lg" type="email" placeholder="name@example.com" />
  </InputGroup>
  <InputGroup
    label="About yourself"
    helpText="Please provide a brief description of yourself. This information will be available to the public."
  >
    <TextArea inputSize="lg" />
  </InputGroup>
  <InputGroup label="Gender">
    <Select inputSize="lg">
      <option>Female</option>
      <option>Male</option>
      <option>Other</option>
    </Select>
  </InputGroup>
</form>

Hide labels

You can hide labels while maintaining accessible form elements using the hideLabel prop.

Sign in to Watershed

Sign in
<div className="Form-label">
  <Layer>
    <Toolbar className="Toolbar">
      <Text gutter={false} variant="h4">
        Sign in to Watershed
      </Text>
    </Toolbar>
    <form>
      <InputGroup hideLabel label="Email address">
        <Input inputSize="lg" type="email" placeholder="Email" />
      </InputGroup>
      <InputGroup hideLabel label="Password">
        <Input inputSize="lg" type="password" placeholder="Password" />
      </InputGroup>
      <Button style={{ marginTop: "1rem" }} size="lg" block intent="primary">
        Sign in
      </Button>
    </form>
  </Layer>
</div>

API

InputGroup
idstring
label*string
A label is required for accessibility purposes. Use `hideLabel` to hide it.
hideLabelboolean
Visually hide the label. It remains accessible to screen readers.
errorReactNode
helpTextstring
Optional help text
childrenReactNode
A single input element
cssInterpolationWithTheme<any>
InputBase
inputSizeInputSize
The size of the input element
cssInterpolationWithTheme<any>
Input
inputSizeInputSize
The size of the input element
cssInterpolationWithTheme<any>
TextArea
inputSizeInputSize
The size of the textarea element
cssInterpolationWithTheme<any>
Label
hideboolean
htmlFor*string
cssInterpolationWithTheme<any>
Select
inputSizeInputSize
The size of the select box
cssInterpolationWithTheme<any>
Check
label*string
A label for the checkmark.
cssInterpolationWithTheme<any>