#TextCounter

<TextCounter variant="down" text="test" max={10} />

<TextCounter variant="up" text="test" max={10} />

const Counter = () => {
  const { data } = Form.useData('text-counter-up', initialData)
  return (
    <Flex.Stack divider="line">
      <Flex.Vertical spacing="x-small">
        <Field.String label="Text" path="/text" maxLength={data.max} />
        <TextCounter
          variant={data.variant}
          text={data.text}
          max={data.max}
        />
      </Flex.Vertical>
      <Field.Toggle
        valueOn="down"
        valueOff="up"
        textOn="Down"
        textOff="Up"
        variant="buttons"
        label="Variant"
        path="/variant"
      />
    </Flex.Stack>
  )
}
const variant: TextCounterProps['variant'] = 'down'
const initialData = {
  max: 10,
  variant,
  text: 'Count me!',
}
render(
  <Form.Handler id="text-counter-up">
    <Counter />
  </Form.Handler>,
)