Update checkbox, add form, number input

src/SUMMARY.md

@@ -50,6 +50,8 @@
     * [Datepicker](components/input/datepicker.md)
     * [Timepicker](components/input/timepicker.md)
     * [Datetimepicker](components/input/datetimepicker.md)
+    * [Number Input](components/input/number_input.md)
+    * [Form](components/input/form.md)
 
 * [Layout Components](components/layout/index.md)
     * [Container](components/layout/container.md)

src/components/input/checkbox.md

@@ -4,14 +4,33 @@ Checkbox create a checkbox and return true if it's checked.
 
 ## API
 
+### Interface
+
 ```go
 func Checkbox(s *tgframe.State, c *tgframe.Container, label string) bool
+func CheckboxWithConf(s *tgframe.State, c *tgframe.Container, label string, conf *CheckboxConf) bool
 ```
 
+### Parameters
+
 * `s` is State.
 * `c` is Parent container.
 * `label` is the text on checkbox.
 
+```go
+// CheckboxConf is the configuration for a checkbox.
+type CheckboxConf struct {
+	// Default is true if the checkbox is default checked.
+	Default bool
+
+	// Disabled is true if the checkbox is disabled.
+	Disabled bool
+
+	// ID is the ID of the checkbox.
+	ID string
+}
+```
+
 ## Example
 
 ```go

src/components/input/form.md

@@ -0,0 +1,31 @@
+# Form
+
+Form create a form component.
+The input components in this component will not auto trigger script execution.
+The user need to click the submit button to trigger the script execution.
+
+## API
+
+### Interface
+
+```go
+func Form(c *tgframe.Container, id string) *tgframe.Container
+```
+
+### Parameters
+
+* `c` is Parent container.
+* `id` is the ID of the form.
+
+## Example
+
+```go
+tgcomp.Form(formCompCol, "form").With(func(c *tgframe.Container) {
+	a = tgcomp.Number(c, p.State, "a")
+	b = tgcomp.Number(c, p.State, "b")
+})
+
+if a != nil && b != nil {
+	tgcomp.Text(formCompCol, fmt.Sprintf("int(a) + int(b) = %d", int(*a)+int(*b)))
+}
+```

src/components/input/number_input.md

@@ -0,0 +1,79 @@
+# Number Input
+
+NumberInput create a number input and return its value.
+
+## API
+
+### Interface
+
+```go
+func Number(s *tgframe.State, c *tgframe.Container, label string) int
+func NumberWithConf(s *tgframe.State, c *tgframe.Container, label string, conf *NumberConf) int
+```
+
+### Parameters
+
+* `s` is State.
+* `c` is Parent container.
+* `label` is the label of the number input.
+
+```go
+// NumberConf is the configuration for a number component.
+type NumberConf struct {
+	// Default is the default value of the number component.
+	Default *float64
+
+	// Min is the minimum value of the number component.
+	Min *float64
+
+	// Max is the maximum value of the number component.
+	Max *float64
+
+	// Step is the step of the number component.
+	Step *float64
+
+	// Color is the color of the number component.
+	Color tcutil.Color
+
+	// Placeholder is the placeholder of the number component.
+	Placeholder string
+
+	// Disabled is the disabled state of the number component.
+	Disabled bool
+
+	// ID is the ID of the number component.
+	ID string
+}
+
+func (c *NumberConf) SetMin(min float64) *NumberConf {
+	c.Min = &min
+	return c
+}
+
+func (c *NumberConf) SetMax(max float64) *NumberConf {
+	c.Max = &max
+	return c
+}
+
+func (c *NumberConf) SetStep(step float64) *NumberConf {
+	c.Step = &step
+	return c
+}
+```
+
+## Example
+
+```go
+numberValue := tgcomp.NumberWithConf(numberCompCol, p.State, "Number",
+	(&tgcomp.NumberConf{
+		Placeholder: "input the value here",
+		Color:       tcutil.ColorSuccess,
+	}).SetMin(10).SetMax(20).SetStep(2))
+
+valStr := ""
+if numberValue != nil {
+	valStr = fmt.Sprint(*numberValue)
+}
+
+tgcomp.TextWithID(numberCompCol, "Value: "+valStr, "number_result")
+```