# Field research

[toc]

## Material UI

### Input
[Input](https://material-ui.com/api/input/) ([code](https://github.com/mui-org/material-ui/blob/master/packages/material-ui/src/Input/Input.js))

<Input defaultValue="Hello world" inputProps={{ 'aria-label': 'description' }} />

[InputBase](https://material-ui.com/api/input-base/) ([code](https://github.com/mui-org/material-ui/blob/master/packages/material-ui/src/InputBase/InputBase.js))

<InputBase
  className={classes.input}
  placeholder="Search Google Maps"
  inputProps={{ 'aria-label': 'search google maps' }}
/>

### TextField
[TextField](https://material-ui.com/components/text-fields/)
has `label` prop

<TextField id="standard-basic" label="Standard" />
<TextField
  label="Read Only"
  defaultValue="Hello World"
  InputProps={{
    readOnly: true,
  }}
/>
<TextField
  label="Number"
  type="number"
  InputLabelProps={{
    shrink: true,
  }}
/>

### FormControl
[FormControl](https://material-ui.com/api/form-control/)

<FormControl>
  <InputLabel htmlFor="my-input">Email address</InputLabel>
  <Input id="my-input" aria-describedby="my-helper-text" />
  <FormHelperText id="my-helper-text">We'll never share your email.</FormHelperText>
</FormControl>

### Radio buttons
[Radio buttons](https://material-ui.com/components/radio-buttons/)

<FormControl component="fieldset">
  <FormLabel component="legend">Gender</FormLabel>
  <RadioGroup aria-label="gender" name="gender1" value={value} onChange={handleChange}>
    <FormControlLabel value="female" control={<Radio />} label="Female" />
    <FormControlLabel value="male" control={<Radio />} label="Male" />
    <FormControlLabel value="other" control={<Radio />} label="Other" />
    <FormControlLabel value="disabled" disabled control={<Radio />} label="(Disabled option)" />
  </RadioGroup>
</FormControl>

### Switch
[Switch](https://material-ui.com/components/switches/)

<Switch
  checked={state.checkedA}
  onChange={handleChange}
  name="checkedA"
  inputProps={{ 'aria-label': 'secondary checkbox' }}
/>

<FormControlLabel
  control={<Switch checked={state.checkedA} onChange={handleChange} name="checkedA" />}
  label="Secondary"
/>

[Checkbox](https://material-ui.com/components/checkboxes/)

## Evergreen

[TextInput and TextInputField](https://evergreen.segment.com/components/text-input)

TextInput and TextInputField

### TextInput

<TextInput name="text-input-name" placeholder="Text input placeholder..." />

### TextInputField

<TextInputField
  id="ids-are-optional"
  label="A required text input field"
  required
  description="This is a description."
  placeholder="Placeholder text"
/>

### FormField

https://evergreen.segment.com/components/form-field

## Ant Design

[Input - Ant Design](https://ant.design/components/input/)

<Form
  name="basic"
>
  <Form.Item
    label="Username"
    name="username"
    rules={[{ required: true, message: 'Please input your username!' }]}
  >
    <Input /> // ends up with id="basic_username"
  </Form.Item>
</Form>

## Atlassian

[Text field - Textfield - Components - Atlassian Design System](https://atlassian.design/components/textfield/examples)

<Textfield name="basic" aria-label="default text field" />;

## Carbon

[Text input – Carbon Design System](https://www.carbondesignsystem.com/components/text-input/usage/)

    <TextInput
        helperText="Optional helper text"
        id="test2"
        invalidText="A valid value is required"
        labelText="Text input label"
        placeholder="Placeholder text"
      />

## Fluent UI React v8

[TextField](https://developer.microsoft.com/en-us/fluentui#/controls/web/textfield)

<TextField label="Standard" defaultValue="foo" />

## Fluent UI React Northstar

[Input](https://fluentsite.z22.web.core.windows.net/0.57.0/components/input/definition)

<Input placeholder="Search..." />

[Form](https://fluentsite.z22.web.core.windows.net/0.57.0/components/form/definition)

<Form onSubmit={() => alert('Form submitted')}>
  <FormInput
    label="First name"
    name="firstName"
    id="first-name"
    required
    showSuccessIndicator={false}
  />
</Form>

## React-Bootstrap
[Forms - Bootstrap](https://react-bootstrap.github.io/components/forms/)

<Form>
  <Form.Group className="mb-3" controlId="formBasicEmail"> // controlId is used for the label/input association
    <Form.Label>Email address</Form.Label>
    <Form.Control type="email" placeholder="Enter email" />
    <Form.Text className="text-muted">
      We'll never share your email with anyone else.
    </Form.Text>
  </Form.Group>
</Form>

## Adobe Spectrum
[TextField + Label - Spectrum](https://opensource.adobe.com/spectrum-web-components/components/textfield)

<sp-field-label for="name-0">Name</sp-field-label>
<sp-textfield id="name-0" placeholder="Enter your name"></sp-textfield>

## Chakra UI

### Input
[Input](https://chakra-ui.com/docs/form/input)

<Input placeholder="Basic usage" defaultValue="Hello world!" />

[NumberInput](https://chakra-ui.com/docs/form/number-input)

<NumberInput defaultValue={15} min={10} max={20}>
  <NumberInputField />
  <NumberInputStepper>
    <NumberIncrementStepper />
    <NumberDecrementStepper />
  </NumberInputStepper>
</NumberInput>

[PinInput](https://chakra-ui.com/docs/form/pin-input)

<PinInput type="alphanumeric" mask>
  <PinInputField />
  <PinInputField />
  <PinInputField />
  <PinInputField />
</PinInput>

### Checkbox
[Checkbox](https://chakra-ui.com/docs/form/checkbox)

<Checkbox defaultIsChecked>Checkbox</Checkbox>

### Switch
[Switch](https://chakra-ui.com/docs/form/switch)

<Switch id="email-alerts" />

### Radio/RadioGroup
[Radio](https://chakra-ui.com/docs/form/radio)

<RadioGroup onChange={setValue} value={value}>
  <Stack direction="row">
    <Radio value="1">First</Radio>
    <Radio value="2">Second</Radio>
    <Radio value="3">Third</Radio>
  </Stack>
</RadioGroup>