Forms

Select

A styled native select: keyboard, mobile and screen-reader friendly with no extra code.

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

Examples

Basic

Theme

select/basic.tsx

import { Field, Select } from '@jsonresume/ui';
import * as styles from './basic.css';

export default function SelectBasic() {
  return (
    <Field label="Theme" className={styles.root}>
      <Select defaultValue="pro">
        <option value="pro">Pro</option>
        <option value="even">Even</option>
        <option value="elegant">Elegant</option>
        <option value="flat">Flat</option>
      </Select>
    </Field>
  );
}

select/basic.css.ts

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

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

Accessibility

Native semantics; use it instead of a custom listbox whenever options are plain text.

Props

No props of its own; accepts the attributes of the element it renders.