Search

const PreviewEn = () => {
  return (
    <Search>
      <Search.Input type='text' aria-label='Søk' />
      <Search.Clear />
      <Button>Search</Button>
    </Search>
  );
};

render(<PreviewEn />)

const WithLabelEn = () => {
  return (
    <Field>
      <Label>Search for cats</Label>
      <Search>
        <Search.Input type='text' name='cat-search' />
        <Search.Clear />
        <Button>Search</Button>
      </Search>
    </Field>
  );
};

render(<WithLabelEn />)

const Form = () => {
  const [value, setValue] = useState<string>();
  const [submittedValue, setSubmittedValue] = useState<string>();

  return (
    <>
      <form
        onSubmit={(e) => {
          // Prevent navigation from Storybook
          e.preventDefault();
          setSubmittedValue(value);
        }}
      >
        <Search>
          <Search.Input
            type='text'
            aria-label='Søk'
            value={value}
            onChange={(e) => setValue(e.target.value)}
          />
          <Search.Clear />
          <Search.Button />
        </Search>
      </form>

      <Paragraph data-size='md' style={{ marginTop: 'var(--ds-size-2)' }}>
        Submitted value: {submittedValue}
      </Paragraph>
    </>
  );
};

render(<Form />)