Input

const Preview = () => {
  return <Input aria-label='input' />;
};

render(<Preview />)

const ReadOnly = () => {
  return (
    <Field>
      <Label>Fødselsnummer</Label>
      <Input readOnly value='12345678901' />
    </Field>
  );
};

render(<ReadOnly />)

const InputType = () => {
  const [type, setType] = useState<TextfieldProps['type']>('text');

  return (
    <div
      style={{
        display: 'flex',
        gap: 'var(--ds-size-4)',
        alignItems: 'end',
        flexWrap: 'wrap',
      }}
    >
      <Field>
        <Label>
          <span data-lang='no'>Velg</span>
          <span data-lang='en'>Choose</span> type
        </Label>
        <Select
          defaultValue='text'
          lang='en'
          onChange={(e) => setType(e.target.value as TextfieldProps['type'])}
        >
          <Select.Option value='text'>text</Select.Option>
          <Select.Option value='color'>color</Select.Option>
          <Select.Option value='date'>date</Select.Option>
          <Select.Option value='datetime-local'>datetime-local</Select.Option>
          <Select.Option value='email'>email</Select.Option>
          <Select.Option value='file'>file</Select.Option>
          <Select.Option value='month'>month</Select.Option>
          <Select.Option value='hidden'>hidden</Select.Option>
          <Select.Option value='number'>number</Select.Option>
          <Select.Option value='password'>password</Select.Option>
          <Select.Option value='search'>search</Select.Option>
          <Select.Option value='tel'>tel</Select.Option>
          <Select.Option value='time'>time</Select.Option>
          <Select.Option value='url'>url</Select.Option>
          <Select.Option value='week'>week</Select.Option>
        </Select>
      </Field>
      <ArrowRightIcon aria-hidden width='3rem' height='3rem' />
      <Field>
        <Label>{`type="${type}"`}</Label>
        <Input type={type} />
      </Field>
    </div>
  );
};

render(<InputType />)