Incular logoIncular
API ReferenceDesign Systems

TextField & TextArea

Styled single-line and multiline inputs with submit and change handlers.

Input = TextField (base-UI terminology; TextField is the compat name).

InputLinesSubmit
TextField / InputSingleon_submit + on_changed
TextAreaMultipleon_changed only
DocumentEditorMultiple, long documentson_changed only
use incular::prelude::*;
use incular::controls_prelude::{TextArea, TextField};

fn main() {
    let app = Application::new(|_cx| {
        Container::builder()
            .padding(EdgeInsets::all(24.0))
            .alignment(Alignment::CENTER)
            .child(
                Column::builder()
                    .main_axis_size(MainAxisSize::Min)
                    .spacing(8.0)
                    .children(Vec::<Widget>::from([
                        TextField::new(TextEditingController::with_text(
                                "",
                            ))
                            .placeholder("Name")
                            .on_submit(|value| println!("submit: {value}")).into(),
                        TextArea::new(TextEditingController::with_text(
                                "Bio",
                            ))
                            .placeholder("Bio").into(),
                    ]))
                    .build(),
            )
            .build()
            .into()
    })
    .expect("valid application");
    incular::run(app).expect("run application");
}

DocumentEditor looks and behaves like TextArea but lays its text out line by line with EditableText::paragraph_layout. An edit lays out only the lines it changes, so typing near the top of a file of thousands of lines costs about as much as typing at its end. Use it for source files, logs and other long documents; TextArea keeps Flutter's whole-text layout, which suits short text.

use incular::controls_prelude::DocumentEditor;

let source = std::fs::read_to_string("main.rs").unwrap_or_default();
let editor = DocumentEditor::new(TextEditingController::with_text(source))
    .size(Size::new(800.0, 600.0))
    .on_changed(|text| println!("{} bytes", text.len()));

TextFieldStyle { background, foreground, placeholder_color, border, border_focused, border_radius, padding } — all Option.

Related: EditableText, Form.