Select

import { Select } from "@camome/core/Select";

export default function Default() {
  return (
    <Select label="Job title">
      <option value="developer">Developer</option>
      <option value="designer">Designer</option>
      <option value="sales">Sales</option>
    </Select>
  );
}

import { Select } from "@camome/core/Select";

import styles from "./styles.module.scss";

export default function Size() {
  return (
    <div className={styles.size__container}>
      <Select label="Small" size="sm">
        <option value="small">Developer</option>
      </Select>
      <Select label="Medium" size="md">
        <option value="medium">Developer</option>
      </Select>
      <Select label="Large" size="lg">
        <option value="large">Developer</option>
      </Select>
    </div>
  );
}

import { Select } from "@camome/core/Select";

export default function Fill() {
  return (
    <Select label="Job title" fill>
      <option value="developer">Developer</option>
      <option value="designer">Designer</option>
      <option value="sales">Sales</option>
    </Select>
  );
}

Fill.parameters = {
  layout: "padded",
};

import { FormField } from "@camome/core/FormField";
import { Select } from "@camome/core/Select";

export default function Description() {
  return (
    <FormField label="Job title" description="Description text">
      <Select>
        <option value="developer">Developer</option>
        <option value="designer">Designer</option>
        <option value="marketer">Marketer</option>
      </Select>
    </FormField>
  );
}

import { Select } from "@camome/core/Select";

export default function Error() {
  return (
    <Select label="Job title" error="Something is wrong" id="error">
      <option value="developer">Developer</option>
      <option value="designer">Designer</option>
      <option value="marketer">Marketer</option>
    </Select>
  );
}

import { Select } from "@camome/core/Select";

export default function Disabled() {
  return (
    <Select label="Job title" disabled>
      <option value="developer">Developer</option>
      <option value="designer">Designer</option>
      <option value="sales">Sales</option>
    </Select>
  );
}