Textfield

const Preview = () => {
  return <Textfield label='Label' />;
};

render(<Preview />)

const WithRows = () => {
  return <Textfield label='Label' multiline rows={4} />;
};

render(<WithRows />)

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' />
      <Textfield label={`type="${type}"`} type={type} />
    </div>
  );
};

render(<InputType />)

const RequiredEn = () => (
  <Textfield
    label={
      <>
        Where do you live?
        <Tag
          data-color='warning'
          style={{ marginInlineStart: 'var(--ds-size-2)' }}
        >
          Required
        </Tag>
      </>
    }
    required
  />
);

render(<RequiredEn />)