# Text field

## Field sizes

```js
const [value, setValue] = React.useState('');

<SilkeBox column gap="l">
  {['default', 'zombie', 'ghost'].map((kind) =>
    ['base', 's'].map((size) => (
      <SilkeBox key={kind} gap="l" vAlign="end">
        <SilkeTextField
          flex
          key={size || 'default'}
          label={`${kind || 'default'} - ${size}`}
          placeholder={kind || 'default' + ' ' + size}
          size={size}
          kind={kind}
          help={kind + ' -- ' + 'help'}
          value={value}
          onChange={setValue}
        />
        <SilkeTextField
          flex
          error="Got error"
          key={size || 'default'}
          label={`${kind || 'default'} - ${size}`}
          placeholder={kind || 'default' + ' ' + size}
          size={size}
          kind={kind}
          value={value}
          onChange={setValue}
        />
        <SilkeTextField
          flex
          disabled
          key={size || 'default'}
          label={`${kind || 'default'} - ${size}`}
          placeholder={kind || 'default' + ' ' + size}
          size={size}
          kind={kind}
          help={kind + ' -- ' + 'help'}
          value={value}
          onChange={setValue}
        />
      </SilkeBox>
    )),
  )}
</SilkeBox>;
```

## Inline fields

```js
const [value, setValue] = React.useState('');

<SilkeBox column gap="l">
  {['default', 'zombie', 'ghost'].map((kind) =>
    ['base', 's'].map((size) => (
      <SilkeBox key={kind} gap="l" vAlign="center">
        <SilkeBox width="xxl">
          {kind}/{size}
        </SilkeBox>
        <SilkeTextField
          flex
          inline
          key={size || 'default'}
          label={`${kind || 'default'} - ${size}`}
          placeholder={kind || 'default' + ' ' + size}
          size={size}
          kind={kind}
          help={kind + ' -- ' + 'help'}
          value={value}
          onChange={setValue}
        />
        <SilkeTextField
          flex
          inline="label-inside"
          key={size || 'default'}
          label={`${kind || 'default'} - ${size}`}
          placeholder={kind || 'default' + ' ' + size}
          size={size}
          kind={kind}
          error="Testing"
          help={kind + ' -- ' + 'help'}
          value={value}
          onChange={setValue}
        />
      </SilkeBox>
    )),
  )}
</SilkeBox>;
```

```js
const [value, setValue] = React.useState('');
const items = ipsum.list((i) => ({
  value: i,
  label: ipsum.name(),
  disabled: i > 4 && !Math.floor(Math.random() * 3),
}));

<>
  <SilkeTextField
    label="Domain name"
    placeholder="Placeholder"
    iconLeft="arrow.left"
    iconRight="arrow.right"
    value={value}
    help="e.g. domain.com"
    onChange={setValue}
    error={value === 'error' ? 'This field has an error' : undefined}
  />
  <SilkeTextField
    label="Text label"
    placeholder="Placeholder"
    error="This field has an error"
    value={value}
    onChange={setValue}
  />
  <SilkeTextField
    multiline
    label="Text label"
    placeholder="Placeholder"
    minLength={10}
    maxLength={50}
    value={value}
    onChange={setValue}
  />
  <SilkeTextField
    label="Text label"
    placeholder="Placeholder"
    value={value}
    inline
    onChange={setValue}
  />
  <SilkeTextField label="Text label" placeholder="Placeholder" value={value} onChange={setValue}>
    <SilkeTextFieldItem before gap="xxs" hPad="xs">
      {ipsum.list(3, (i) => (
        <SilkeTag key={i} label={ipsum.name(2)} onRemove={() => {}} />
      ))}
    </SilkeTextFieldItem>
    <SilkeTextFieldItem>
      <SilkeButton label="Button" />
    </SilkeTextFieldItem>
  </SilkeTextField>
  <SilkeTextField label="Text label" placeholder="Placeholder" value={value} onChange={setValue}>
    <SilkeTextFieldItem>
      <SilkeSelectField
        kind="ghost"
        inline
        onChange={() => console.log('selected')}
        value={items[1].value}
        items={items}
      />
    </SilkeTextFieldItem>
  </SilkeTextField>
</>;
```

## Field states

```js
<SilkeBox column gap="l">
  {['default', 'secondary', 'ghost'].map((kind) => (
    <SilkeBox gap="m" vAlign="end">
      <SilkeTextField kind={kind} flex label={`${kind}`} placeholder={kind + ' '} />
      <SilkeTextField
        kind={kind}
        flex
        label={`${kind} error`}
        placeholder={kind}
        error="Got error"
      />
    </SilkeBox>
  ))}
</SilkeBox>
```

## Disabled

```js
const [value, setValue] = React.useState('john.barnes@liverpool.com');

<SilkeBox column gap="l">
  {['default', 'secondary', 'ghost'].map((kind) => (
    <SilkeTextField
      disabled
      kind={kind}
      flex
      value={value}
      onChange={setValue}
      label={`${kind}`}
      placeholder={kind + ' '}
    />
  ))}
</SilkeBox>;
```

## Autofocus inside popover

```jsx
() => {
  const [open1, setOpen1] = React.useState(false);
  const [open2, setOpen2] = React.useState(false);

  return (
    <div>
      <SilkeBox gap="l">
        <SilkeButton label="Open already rendered modal" onClick={() => setOpen1(true)} />
        <SilkeButton label="Open modal that renders on click" onClick={() => setOpen2(true)} />
      </SilkeBox>

      <SilkeModal
        hide={!open1}
        title="This modal is not rerendered"
        onClose={() => setOpen1(false)}
      >
        <SilkeModalContent>
          <p>Autofocus does not work</p>
          <SilkeTextField id="field2" autoFocus label="Hello again" name="helloAgain" />
        </SilkeModalContent>
      </SilkeModal>

      {open2 && (
        <SilkeModal
          title="This modal is rerendered every time it opens"
          onClose={() => setOpen2(false)}
        >
          <SilkeModalContent>
            <p>Autofocus should work every time</p>
            <SilkeTextField id="field2" autoFocus label="Hello again" name="helloAgain" />
          </SilkeModalContent>
        </SilkeModal>
      )}
    </div>
  );
};
```

## Tooltip

```js
<SilkeTextField
  id="field2"
  autoFocus
  label="Hello again"
  name="helloAgain"
  tooltip="My tooltip text"
/>
```