```jsx
import CKIcon from "../ck-icon"
import SelectMenu from "../select-menu"

const options = [
  { value: "all_subscribers", label: "All subscribers" },
  { value: "subscribed_to", label: "Subscribed to" },
  { value: "within_segment", label: "Within Segment" },
  { value: "cold_subscribers", label: "Cold subscribers" },
  { value: "country", label: "Within a country or region" },
  { value: "distance", label: "Distance from a city" },
  { value: "subscription date", label: "Subscription date" },
  { value: "first_name", label: "First name" },
  { value: "email_address", label: "Email Address" },
  { value: "custom_field", label: "Custom field" },
]

const [value, setValue] = React.useState()

const handleChange = (event) => {
  setValue(event.target.value)
}

;<>
  <div>
    Blank Input
    <div>
      <Input
        name="myInput"
        state="default"
        placeholder="default"
        className="mb-3"
      />
      <Input
        name="myInput"
        state="error"
        placeholder="error"
        className="mb-3"
      />
      <Input
        name="myInput"
        state="success"
        placeholder="success"
        className="mb-3"
      />
    </div>
    Input with prepend
    <div>
      <Input name="myInput" state="default" className="mb-3" prepend="$ USD" />
      <Input
        name="myInput"
        state="default"
        className="mb-3"
        prepend={<CKIcon name="magic-wand" color="gray" size="sm" />}
      />
    </div>
    Input with append
    <div>
      <Input
        name="myInput"
        state="default"
        className="mb-3"
        append={<CKIcon name="cart" />}
      />
    </div>
    <div>
      <Input
        name="myInput"
        state="default"
        className="mb-3"
        append=".ck.page"
      />
    </div>
    <div></div>
    <div className="mt-4">
      <Input
        name="myInput"
        state="default"
        className="mb-3"
        append={
          <SelectMenu
            aria-label="Demo label"
            options={options}
            className="text-black"
            onChange={handleChange}
            value={value}
            placeholder="Choose a filter"
          />
        }
      />
    </div>
  </div>
</>
```
