Forms

Input

Text inputs in three sizes; lg is the large docs search field.

import { Input } from '@jsonresume/ui'Source(opens in a new tab)

Playground

Change the props and copy the result.

size

placeholder

disabled

jsx

<Input size="md" placeholder="thomasdavis" />

Examples

Sizes

input/sizes.tsx

import { Input, Stack } from '@jsonresume/ui';
import * as styles from './sizes.css';

export default function InputSizes() {
  return (
    <Stack gap={3} className={styles.root}>
      <Input size="sm" aria-label="Small" placeholder="Small" />
      <Input aria-label="Medium" placeholder="Medium" />
      <Input
        size="lg"
        type="search"
        aria-label="Search the docs"
        placeholder="Search the docs"
      />
    </Stack>
  );
}

input/sizes.css.ts

import { style } from '@vanilla-extract/css';

export const root = style({ width: 'min(100%, 28rem)' });

Accessibility

Give inputs outside a Field an aria-label.
Focus thickens the border in the focus color.

Props

<Input>

Also accepts the attributes of the element Input renders.
Prop	Type	Default	Description
size	smmdlg	–