# Silke CSS number field

This field can be used to easily format CSS numbers.
You can wrap the filed in a css context to enable automatic conversion between formats

### With variables

```jsx
() => {
  const [value, setValue] = React.useState('20px');
  const formats = ['px', '%', 'em', 'vh', 'vw', 'None'];

  return (
    <SilkeCSSContext
      viewport={[1920, 1080]}
      fontSize={18}
      container={[200, 150]}
      variablesv2={[
        { key: 'A', name: 'size-xs', value: '10', unit: 'px' },
        { key: 'B', name: 'size-s', value: '50', unit: 'px' },
        { key: 'C', name: 'size-m', value: '100', unit: 'px' },
        { key: 'D', name: 'size-l', value: '200', unit: 'px' },
        { key: 'E', name: 'size-xl', value: '400', unit: 'px' },
        { key: 'F', name: 'size-xxl', value: '800', unit: 'px' },
        { key: 'G', name: 'size-xxxl', value: '1600', unit: 'px' },
        { key: 'H', name: 'size-xxxxl', value: '3200', unit: 'px' },
      ]}
    >
      <TextFieldContext inline="label-inside" size="s">
        <SilkeBox column gap="s">
          <h1>{value}</h1>

          {['default', 'zombie', 'ghost'].map((kind) => (
            <SilkeBox gap="s" key={kind} style={{ width: 256 }}>
              <SilkeCssNumberField
                kind={kind}
                label="Label"
                allowAuto
                value={value}
                formats={formats}
                onChange={setValue}
              />
              <SilkeCssNumberField
                kind={kind}
                value={value}
                label="Label"
                formats={formats}
                onChange={setValue}
              />
              <SilkeCssNumberField
                kind={kind}
                label="Label"
                value={value}
                formats={formats}
                onChange={setValue}
              />
            </SilkeBox>
          ))}
        </SilkeBox>
      </TextFieldContext>
    </SilkeCSSContext>
  );
};
```

### Basic usage

```js
() => {
  const [value, setValue] = React.useState('20px');
  const formats = ['px', '%', 'em', 'vh', 'vw'];

  return (
    <SilkeBox column gap="s">
      <h1>{value}</h1>

      {['default', 'zombie', 'ghost'].map((kind) => (
        <SilkeBox gap="s" key={kind} style={{ width: 380 }}>
          <SilkeCssNumberField
            kind={kind}
            label="Label"
            allowAuto
            value={value}
            size="s"
            formats={formats}
            onChange={setValue}
          />
          <SilkeCssNumberField
            kind={kind}
            label="Label"
            allowAuto
            value={value}
            size="s"
            formats={formats}
            onChange={setValue}
          />
          <SilkeCssNumberField
            kind={kind}
            label="Label"
            value={value}
            formats={formats}
            onChange={setValue}
          />
          <SilkeCssNumberField
            kind={kind}
            label="Label"
            value={value}
            inline
            formats={formats}
            onChange={setValue}
          />
        </SilkeBox>
      ))}
    </SilkeBox>
  );
};
```

```jsx
() => {
  const [value, setValue] = React.useState('20px');
  const formats = ['px', '%', 'em', 'vh', 'vw'];

  return (
    <TextFieldContext inline="label-inside" size="s">
      <SilkeBox column gap="s">
        <h1>{value}</h1>

        {['default', 'zombie', 'ghost'].map((kind) => (
          <SilkeBox gap="s" key={kind} style={{ width: 256 }}>
            <SilkeCssNumberField
              kind={kind}
              label="Label"
              allowAuto
              value={value}
              formats={formats}
              onChange={setValue}
            />
            <SilkeCssNumberField
              kind={kind}
              label="Label"
              value={value}
              formats={formats}
              onChange={setValue}
            />
            <SilkeCssNumberField
              kind={kind}
              label="Label"
              value={value}
              formats={formats}
              onChange={setValue}
            />
          </SilkeBox>
        ))}
      </SilkeBox>
    </TextFieldContext>
  );
};
```

### Validation

```jsx
() => {
  const [value, setValue] = React.useState('20%');

  return (
    <SilkeBox column gap="s">
      <h1>{value}</h1>

      {['default', 'zombie', 'ghost'].map((kind) => (
        <SilkeBox gap="s" key={kind}>
          <SilkeCssNumberField
            kind={kind}
            value={value}
            label="Label"
            onChange={setValue}
            min={0}
            max={100}
          />
        </SilkeBox>
      ))}
    </SilkeBox>
  );
};
```

### With custom context

```js
() => {
  const [x, setX] = React.useState('20px');
  const [y, setY] = React.useState('20px');
  const formats = ['px', '%', 'em', 'vh', 'vw'];

  return (
    <SilkeCSSContext viewport={[1920, 1080]} fontSize={18} container={[200, 150]}>
      <h1>
        {x} - {y}
      </h1>

      <SilkeBox gap="m">
        <SilkeCssNumberField
          axis="x"
          label="X"
          value={x}
          inline
          formats={formats}
          onChange={setX}
        />
        <SilkeCssNumberField
          axis="y"
          label="Y"
          value={y}
          inline
          formats={formats}
          onChange={setY}
        />
      </SilkeBox>
    </SilkeCSSContext>
  );
};
```

### Also works with text filed context

```js
() => {
  const [x, setX] = React.useState('20px');
  const [y, setY] = React.useState('20px');
  const formats = ['px', '%', 'em', 'vh', 'vw'];

  return (
    <SilkeCSSContext viewport={[1920, 1080]} fontSize={18} container={[200, 150]}>
      <h1>
        {x} - {y}
      </h1>

      <TextFieldContext kind="secondary" size="s" inline>
        <SilkeBox gap="m">
          <SilkeCssNumberField axis="x" label="X" value={x} formats={formats} onChange={setX} />
          <SilkeCssNumberField axis="y" label="Y" value={y} formats={formats} onChange={setY} />
        </SilkeBox>
      </TextFieldContext>

      <TextFieldContext kind="ghost" size="large" inline>
        <SilkeBox gap="m">
          <SilkeCssNumberField axis="x" label="X" value={x} formats={formats} onChange={setX} />
          <SilkeCssNumberField axis="y" label="Y" value={y} formats={formats} onChange={setY} />
        </SilkeBox>
      </TextFieldContext>
    </SilkeCSSContext>
  );
};
```