# Conditions Input

```js
const [conditions, setConditions] = React.useState(['{{abc-1}}', '==', 1]);
// const [conditions, setConditions] = React.useState(["{{abc-1}}","==",1,"AND","vev/device","==","mobile","AND","vev/device","==","mobile","AND","vev/device","==","mobile","AND","vev/device","==","mobile","AND","vev/device","=="]
// );

const systemOptions = [
  {
    value: 'vev/device',
    label: 'Device type',
    type: 'select',
    icon: 'mobile',
    options: ['mobile', 'tablet', 'desktop'],
  },
  { value: 'vev/width', type: 'number', label: 'Viewport width', icon: 'arrows.horizontal' },
  { value: 'vev/height', type: 'number', label: 'Viewport height', icon: 'arrows-up-down' },
  {
    value: 'vev/scrollPixelsY',
    type: 'number',
    label: 'Scrolled pixels',
    icon: 'interaction.mouse',
  },
  {
    value: 'vev/scrollPercentageY',
    type: 'number',
    label: 'Scrolled percentage',
    icon: 'interaction.mouse',
  },
];

const widgetOptions = [
  {
    name: 'key',
    type: 'select',
    options: {
      items: [
        {
          value: 'Backspace',
          label: 'backspace',
        },
        {
          value: 'Tab',
          label: 'tab',
        },
        {
          value: 'Enter',
          label: 'enter',
        },
        {
          value: 'Shift',
          label: 'shift',
        },
        {
          value: 'Control',
          label: 'ctrl',
        },
      ],
    },
    description: 'Key pressed',
  },
];

<SilkeCSSContext
  viewport={[1920, 1080]}
  fontSize={18}
  container={[200, 150]}
  variablesv2={[
    { key: 'abc-1', name: 'size-xs', value: '10', unit: 'px', type: 'number' },
    { key: 'abc-2', name: 'size-s', value: '50', unit: 'px', type: 'number' },
    { key: 'abc-3', name: 'size-m', value: '100', unit: 'px', type: 'number' },
    { key: 'abc-4', name: 'primary', value: '#abcdef', type: 'color' },
    { key: 'abc-5', name: 'secondary', value: '#123456', type: 'color' },
  ]}
>
  <SilkeBox style={{ width: '400px' }}>
    <SilkeConditionsInput
      conditions={conditions}
      systemOptions={systemOptions}
      widgetOptions={widgetOptions}
      label="Enter condition"
      placeholder="Write conditional"
      onChange={setConditions}
    />
  </SilkeBox>
  <pre>Output: {JSON.stringify(conditions)}</pre>
</SilkeCSSContext>;
```