Input

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

render(<Preview />)

const WithLabel = () => {
  return (
    <Field>
      <Label>Fødselsnummer</Label>
      <Input />
    </Field>
  );
};

render(<WithLabel />)

const WithError = () => {
  return (
    <Field>
      <Label>Fødselsnummer</Label>
      <Input aria-invalid />
    </Field>
  );
};

render(<WithError />)

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

render(<Disabled />)

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

render(<ReadOnly />)

const ReadOnlyCheckAndRadio = () => {
  return (
    <>
      <Fieldset>
        <Fieldset.Legend>Kjønn</Fieldset.Legend>
        <Field>
          <Input
            readOnly
            value='male'
            name='gender'
            type='radio'
            defaultChecked
          />
          <Label>Mann</Label>
        </Field>
        <Field>
          <Input readOnly value='female' name='gender' type='radio' />
          <Label>Kvinne</Label>
        </Field>
        <Field>
          <Input readOnly value='other' name='gender' type='radio' />
          <Label>Annet</Label>
        </Field>
      </Fieldset>
      <Divider />
      <Field>
        <Input readOnly type='checkbox' defaultChecked name='checkbox' />
        <Label>Jeg samtykker</Label>
      </Field>
    </>
  );
};

render(<ReadOnlyCheckAndRadio />)