```jsx
<LabeledCheckbox
  placeholder="full name"
  name="name"
  label="Name"
  type="text"
  style={{flex: 1}}
  />
```

<!--
#### Complex Form Layout

```jsx
import Flex from '@ui/components/Flex'
import Box from '@ui/components/Box'
import Button from '@ui/components/Button'

handleSubmit = e => {
  e.preventDefault();
  const {target} = e;
  const form = new FormData(target)
  const data = Object.fromEntries(form.entries())
  console.log(data)
}

<form onSubmit={handleSubmit} className="Flex Flex_col">
  <Box bem={[['rule']]}>
    <Flex justify="around">
      <LabeledCheckbox placeholder="first name..." name="first-name" label="First" type="text" style={{flex: 1}}/>
      <LabeledCheckbox placeholder="family name..." name="last-name" label="Last" type="text" style={{flex: 1}}/>
    </Flex>
    <br/>
    <Box bem={[['rule','flat']]} style={{
      margin: '0 calc(-1rem - 1px) calc(-1rem - 1px)',
      borderRadius: 0,
    }}>
      <Flex justify="around">
        <div style={{flex: 1}}>
          <LabeledCheckbox id="opt1" label="I'd prefer doing this." value="this" name="thisThat" type="radio"/>
          <LabeledCheckbox id="opt2" label="I'd prefer doing that." value="that" name="thisThat" type="radio"/>
          <LabeledCheckbox id="opt0" label="I would prefer not to." value="false" name="thisThat" type="radio"/>
        </div>
        <div style={{flex: 1}}>
          <LabeledCheckbox id="hello" label="Hello" name="hello"/>
          <LabeledCheckbox id="world" label="World" name="world"/>
        </div>
      </Flex>
    </Box>
  </Box>
  <Flex align="center" justify="between">
    <LabeledCheckbox id="consent" value="consented" name="consent" required={true} type="toggle">
      <small style={{opacity: .66}}>Agree to our <a href="#terms">terms and conditions</a>?</small>
    </LabeledCheckbox>
    <Button type="submit">Log Form Data</Button>
  </Flex>
</form>
```
 -->