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

Email address

This field is required

/** @jsx jsx */

function Example() {
  return (
    <div css={{ 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>
  );
}

Show Code

TextArea

Example textarea

Please provide a brief description of yourself. This will go on your profile.

Example textarea

Please provide a brief description of yourself. This will go on your profile.

Example textarea

This field is required

Please provide a brief description of yourself. This will go on your profile.

/** @jsx jsx */

function Example() {
  return (
    <div css={{ 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>
  );
}

Show Code

Select

Gender

This field is required

/** @jsx jsx */

function Example() {
  return (
    <div css={{ 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>
  );
}

Show Code

Check

/** @jsx jsx */

function Example() {
  return (
    <div css={{ 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>
  );
}

Show Code

Combined example

/** @jsx jsx */

function Example() {
  return (
    <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>
  );
}

Show Code

Different sizes

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

/** @jsx jsx */

function Example() {
  return (
    <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>
  );
}

Show Code

Hide labels

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

Sign in to Watershed

/** @jsx jsx */

function Example() {
  const theme = useTheme();

  return (
    <div css={{ maxWidth: "400px" }}>
      <Layer>
        <Toolbar
          css={{
            justifyContent: "center",
            borderBottom: `1px solid ${theme.colors.border.default}`
          }}
        >
          <Text gutter={false} variant="h4">
            Sign in to Watershed
          </Text>
        </Toolbar>
        <form css={{ padding: theme.spaces.lg }}>
          <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
            css={{ marginTop: "1rem" }}
            size="lg"
            component="button"
            type="submit"
            block
            intent="primary"
          >
            Sign in
          </Button>
        </form>
      </Layer>
    </div>
  );
}

Show Code

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