Select

import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
} from "@araf-ds/core"

export default function Example() {
  return (
    <Select onValueChange={(val) => console.log(val)}>
      <SelectTrigger label="Country" placeholder="Select country" />
      <SelectContent>
        <SelectItem value="id">Indonesia</SelectItem>
        <SelectItem value="sg">Singapore</SelectItem>
        <SelectItem value="my">Malaysia</SelectItem>
      </SelectContent>
    </Select>
  )
}

<Select onValueChange={(val) => console.log(val)}>
  <SelectTrigger label="Country" placeholder="Select country" />
  <SelectContent>
    <SelectItem value="id">Indonesia</SelectItem>
    <SelectItem value="sg">Singapore</SelectItem>
    <SelectItem value="my">Malaysia</SelectItem>
  </SelectContent>
</Select>

<Select defaultValue="id">
  <SelectTrigger label="Country" />
  <SelectContent>
    <SelectItem value="id">Indonesia</SelectItem>
    <SelectItem value="sg">Singapore</SelectItem>
  </SelectContent>
</Select>

<Select>
  <SelectTrigger label="Role" placeholder="Select role" />
  <SelectContent>
    <SelectGroup>
      <SelectLabel>Management</SelectLabel>
      <SelectItem value="admin">Administrator</SelectItem>
      <SelectItem value="manager">Manager</SelectItem>
    </SelectGroup>
    <SelectSeparator />
    <SelectGroup>
      <SelectLabel>Operational</SelectLabel>
      <SelectItem value="editor">Editor</SelectItem>
      <SelectItem value="viewer" disabled>Viewer</SelectItem>
    </SelectGroup>
  </SelectContent>
</Select>

<Select>
  <SelectTrigger
    label="Department"
    placeholder="Select department"
    state="error"
    helperText="Please select a department"
  />
  <SelectContent>
    <SelectItem value="eng">Engineering</SelectItem>
    <SelectItem value="design">Design</SelectItem>
  </SelectContent>
</Select>

<Select disabled>
  <SelectTrigger label="Region" placeholder="Select region" state="disabled" />
  <SelectContent>
    <SelectItem value="asia">Asia Pacific</SelectItem>
  </SelectContent>
</Select>